在探索deepseek官網時，你可能會注意到一個有趣的功能：當鼠標懸停在按鈕上時，仍然可以滾動整個頁面。這種效果被稱為“滾動穿透”。相比之下，通義千問的頁面在鼠標懸停在按鈕上時，滾動事件會被按鈕攔截，無法控制頁面滾動。
那么，deepseek是如何實現這種滾動穿透效果的呢？經過研究，我們發現deepseek官網的輸入文本容器采用了一種特殊的css屬性：position: sticky。這個屬性使得容器在滾動時保持在視圖中，從而實現了滾動穿透的效果。
具體的實現代碼如下所示：
position: sticky; bottom: 0px;
這段CSS代碼使得輸入文本容器在頁面滾動時，始終保持在視圖的底部，從而不會干擾頁面的整體滾動。
為了更好地理解這種效果，我們可以查看一個簡單的demo。在這個demo中，輸入文本容器使用了position: sticky屬性，從而在按鈕上進行滑輪操作時，仍然可以控制頁面滾動的效果。
立即學習“前端免費學習筆記（深入）”；
通過這種方法，deepseek成功地實現了滾動穿透的功能，使得用戶在使用頁面時更加流暢和便捷。
以上就是<a
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
喜歡就支持一下吧
相關推薦
