為什么有的網站能實現鼠標滾動穿透效果，而有的不行？

在瀏覽網站時，你可能會注意到某些頁面元素在鼠標懸停時仍允許滾動整個頁面。這種現象在一些網站上尤為顯著，例如deepseek。讓我們深入探討這種“滾動穿透”效果的實現原理，以及為何某些網站能做到這一點，而其他網站則不能。

在deepseek的官方網站上，有一個按鈕，當鼠標懸停在其上時，你依然可以滾動整個頁面。這種效果被稱為“滾動穿透”。相比之下，通義千問的頁面則沒有這種效果，鼠標滾輪事件會被按鈕攔截，從而無法滾動頁面。

那么，deepseek是如何實現這種“滾動穿透”的呢？關鍵在于他們對輸入文本容器的樣式設置。具體來說，deepseek在輸入文本的容器上添加了position: sticky屬性，并設置了bottom: 0px。這樣的設置使得容器在頁面滾動時保持在視圖底部，同時不干擾頁面的滾動事件。

讓我們看一下具體的代碼示例：

position: sticky; bottom: 0px;

通過這種方式，deepseek成功地實現了“滾動穿透”的效果，使得用戶在懸停在按鈕上時仍可以控制頁面的滾動。這是一個巧妙的技巧，能夠顯著提升用戶體驗。

希望這個解釋能幫助你理解“滾動穿透”是如何實現的，以及為什么某些網站能做到這一點，而其他網站則不能。