在浏览网站时，你可能会注意到某些页面元素在鼠标悬停时仍允许滚动整个页面。这种现象在一些网站上尤为显著，例如deepseek。让我们深入探讨这种“滚动穿透”效果的实现原理，以及为何某些网站能做到这一点，而其他网站则不能。

在deepseek的官方网站上，有一个按钮，当鼠标悬停在其上时，你依然可以滚动整个页面。这种效果被称为“滚动穿透”。相比之下，通义千问的页面则没有这种效果，鼠标滚轮事件会被按钮拦截，从而无法滚动页面。

那么，deepseek是如何实现这种“滚动穿透”的呢？关键在于他们对输入文本容器的样式设置。具体来说，deepseek在输入文本的容器上添加了position: sticky属性，并设置了bottom: 0px。这样的设置使得容器在页面滚动时保持在视图底部，同时不干扰页面的滚动事件。

让我们看一下具体的代码示例：

Unified LLM Gateway - One API for 70+ AI models. Route to GPT, Claude, Gemini, Qwen, Deepseek, Grok and more

统一LLM网关 - 一个API对接70+AI模型，使用单一API密钥即可调用GPT、Claude、Gemini、Qwen、Deepseek、Grok等主流模型。

下载

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

通过这种方式，deepseek成功地实现了“滚动穿透”的效果，使得用户在悬停在按钮上时仍可以控制页面的滚动。这是一个巧妙的技巧，能够显著提升用户体验。

希望这个解释能帮助你理解“滚动穿透”是如何实现的，以及为什么某些网站能做到这一点，而其他网站则不能。