How does deepseek official website achieve the effect of penetrating mouse scroll event?

How does deepseek official website achieve the effect of penetrating mouse scroll event? This is a very interesting interaction design question. Let's explore how deepseek achieves this effect.

How to achieve the effect of mouse scrolling event penetration?

When browsing web pages, we often encounter some unique interaction designs. For example, users on deepseek's official website can still scroll the entire page through the mouse wheel when hovering their mouse over a button. This phenomenon is called "scroll penetration", which is completely different from the common mouse wheel events intercepted by buttons, such as the performance on the Tongyi Qianwen website.

So, how does deepseek achieve this rolling penetration effect? Let's discuss it in detail.

Implementation principle

The reason why deepseek official website can realize scroll penetration is that a specific CSS attribute is applied to the container where the text is input - position: sticky. This property enables the container to "stick" at a specific location on the page without interfering with the overall scrolling behavior of the page.

The specific CSS code is as follows:

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

The meaning of this code is that when the page is scrolling, the container will be fixed at the bottom of the page, while still allowing the mouse wheel event to penetrate the page, thus achieving the effect of scrolling through.

Demo effect

To better understand this implementation, we can look at a simple demo. Suppose there is a page with a button on it, and the page can still be scrolled when the mouse hovers over the button. This effect can be achieved by:

 <code>   <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scroll Through Demo</title> <style> .container { position: sticky; bottom: 0px; background-color: #f0f0f0; padding: 20px; } .button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } </style>   <div class="container"> <button class="button">Hover me and scroll</button> </div>  </code>

In this demo, we can see that when the mouse hovers over the button, the page can still be scrolled. This is the effect brought by the position: sticky attribute.

In this way, deepseek official website realizes the penetration effect of mouse scrolling events, making the user experience more smooth and natural.

The above is the detailed content of How does deepseek official website achieve the effect of penetrating mouse scroll event?. For more information, please follow other related articles on the PHP Chinese website!