在浏览网站时，你可能会注意到某些页面元素在鼠标悬停时仍允许滚动整个页面。这种现象在一些网站上尤为显著，例如deepseek。让我们深入探讨这种“滚动穿透”效果的实现原理，以及为何某些网站能做到这一点，而其他网站则不能。
在deepseek的官方网站上，有一个按钮，当鼠标悬停在其上时，你依然可以滚动整个页面。这种效果被称为“滚动穿透”。相比之下，通义千问的页面则没有这种效果，鼠标滚轮事件会被按钮拦截，从而无法滚动页面。
那么，deepseek是如何实现这种“滚动穿透”的呢？关键在于他们对输入文本容器的样式设置。具体来说，deepseek在输入文本的容器上添加了position: sticky属性，并设置了bottom: 0px。这样的设置使得容器在页面滚动时保持在视图底部，同时不干扰页面的滚动事件。
让我们看一下具体的代码示例：
position: sticky; bottom: 0px;
通过这种方式，deepseek成功地实现了“滚动穿透”的效果，使得用户在悬停在按钮上时仍可以控制页面的滚动。这是一个巧妙的技巧，能够显著提升用户体验。
希望这个解释能帮助你理解“滚动穿透”是如何实现的，以及为什么某些网站能做到这一点，而其他网站则不能。
