Comment le site officiel Deepseek réalise-t-il l'effet de pénétration de défilement de la souris?

Comment réaliser l'effet de pénétration de défilement de la souris?

Lorsque vous parcourez le site officiel de Deepseek, vous remarquerez peut-être un phénomène unique: vous pouvez toujours faire défiler la page même si la souris est planée sur un bouton. Cet effet n'est pas courant sur d'autres sites Web. Par exemple, sur le site Web de Tongyi Qianwen, l'événement de défilement de la souris sera bloqué par le bouton et la page ne peut pas être défilée. Alors, comment Deepseek réalise-t-il cette "pénétration roulante"?

En fait, la clé pour atteindre cet effet sur le site officiel de Deepseek est que la position: une propriété collante est appliquée sur le conteneur où le texte est entré. Le code CSS spécifique est le suivant:

 <code>position: sticky; bottom: 0px;</code>

Ce paramètre permet au conteneur de rester en bas lorsque la page est défilée sans affecter la livraison des événements de roue de souris, réalisant ainsi l'effet de la pénétration de défilement.

Afin de comprendre cette implémentation plus intuitivement, j'ai préparé un exemple simple pour vous. Vous pouvez voir que sur le conteneur avec la position: propriété collante appliquée, l'événement de roue de souris peut toujours contrôler le défilement de la page.

Grâce à cet exemple, nous pouvons voir que l'attribut de position: collant peut non seulement être utilisé pour atteindre un positionnement collant des éléments, mais aussi nous aider à réaliser l'effet du défilement et de la pénétration de la souris dans des situations spécifiques. Si vous avez des besoins similaires, vous pourriez aussi bien essayer cette méthode.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!