在瀏覽網站時,你可能會注意到某些頁面元素在鼠標懸停時仍允許滾動整個頁面。這種現象在一些網站上尤為顯著,例如deepseek。讓我們深入探討這種“滾動穿透”效果的實現原理,以及為何某些網站能做到這一點,而其他網站則不能。
在deepseek的官方網站上,有一個按鈕,當鼠標懸停在其上時,你依然可以滾動整個頁面。這種效果被稱為“滾動穿透”。相比之下,通義千問的頁面則沒有這種效果,鼠標滾輪事件會被按鈕攔截,從而無法滾動頁面。
那么,deepseek是如何實現這種“滾動穿透”的呢?關鍵在于他們對輸入文本容器的樣式設置。具體來說,deepseek在輸入文本的容器上添加了position: sticky屬性,并設置了bottom: 0px。這樣的設置使得容器在頁面滾動時保持在視圖底部,同時不干擾頁面的滾動事件。
讓我們看一下具體的代碼示例:
position: sticky; bottom: 0px;
通過這種方式,deepseek成功地實現了“滾動穿透”的效果,使得用戶在懸停在按鈕上時仍可以控制頁面的滾動。這是一個巧妙的技巧,能夠顯著提升用戶體驗。
希望這個解釋能幫助你理解“滾動穿透”是如何實現的,以及為什么某些網站能做到這一點,而其他網站則不能。
? 版權聲明
文章版權歸作者所有,未經允許請勿轉載。
THE END