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

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

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

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

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

position: sticky; bottom: 0px;

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

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

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

? 版權聲明
THE END
喜歡就支持一下吧
點贊12 分享