Why can some websites achieve mouse scrolling and penetration effect, while others cannot?

While browsing a website, you may notice that certain page elements still allow scrolling the entire page while the mouse is hovering. This phenomenon is particularly noticeable on some websites, such as deepseek. Let's dive into the principle of how this "rolling penetration" effect is implemented and why some websites can do this, while others can't.

On deepseek's official website, there is a button that you can still scroll the entire page when the mouse hovers over it. This effect is called "rolling penetration". In contrast, Tongyi Qianwen's page does not have this effect. The mouse wheel event will be intercepted by the button, so the page cannot be scrolled.

So, how does deepseek achieve this "rolling penetration"? The key is their style settings for the input text container. Specifically, deepseek adds position: sticky property on the container where the text is entered and sets bottom: 0px . This setting allows the container to remain at the bottom of the view when the page is scrolling without interfering with the page's scrolling event.

Let's take a look at the specific code example:

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

In this way, deepseek successfully achieves the effect of "scroll penetration", so that users can still control the scrolling of the page when hovering over the button. This is a clever trick that can significantly improve the user experience.

Hopefully this explanation helps you understand how "scroll penetration" is implemented and why some websites can do this, while others can't.

The above is the detailed content of Why can some websites achieve mouse scrolling and penetration effect, while others cannot?. For more information, please follow other related articles on the PHP Chinese website!