scroll事件詳解

2021-09-27 04:20:12 字數 1119 閱讀 5817

以前眼高手低,不夠紮實,面試的時候總是處理過,卻想不出來細節,這次開始慢慢整理,蝸牛繼續爬坡

一般情況下,如果出現內容大於瀏覽器的時候,需要新增樣式  overflow:scroll

關於scroll的樣式有以下可以根據需求調整:

滾動條的設定

1. ::-webkit-scrollbar 滾動條整體部分,可以設定寬度等

2. ::-webkit-scrollbar-button 滾動條兩端的按鈕

3. ::-webkit-scrollbar-track  外層軌道

4. ::-webkit-scrollbar-track-piece  內層滾動槽

5. ::-webkit-scrollbar-thumb 滾動的滑塊

6. ::-webkit-scrollbar-corner 邊角

7. ::-webkit-resizer 定義右下角拖動塊的樣式

根據需要新增scroll的容器,假設name為scrollpart ,則使用以上就可以修改樣式,案例為以下:

.scrollpart::-webkit-scrollbar 

........

componentdidmount() 

componentwillunmount()

handlescroll = e => = e.srcelement;

if (clientheight < scrollheight - scrolltop) else

};

在react中無法新增在具體的元素上的,在didmount和unmount生命鉤子中無法獲取到元素,無法實現監聽

當前頁面有帶滾動的彈窗,往往會因為window監聽當彈窗滾動的時候觸發遮罩層所覆蓋頁面的監聽效果。這時候,就需要處理滾動穿透問題。

當modal內部的新增overflow:scroll 會被遮罩層所繼承,繼承後出現,兩個滾動條:modal滾動條以及遮罩層滾動條,兩種方法,一種是根據頁面高度調整彈窗的高度,當彈窗的高度不會大於當前頁面高度時,不會影響到外圍的滾動條。另外一種就是網上所說的找到遮罩層對應的滾動條設定overflow:hidden,設定底部需不滑動頁面為fixed

頁面滾動事件scroll

在mounted鉤子函式裡面註冊scroll事件 mounted window.addeventlistener scroll this.about methods 判斷元素到達當前視窗的什麼位置 簡介 let isup true let titlediv document.getelementsb...

vue中scroll事件不觸發的問題

在做專案的過程中,需求需要做乙個一鍵返回頂部的功能,但是在做監聽隱藏的時候發現 window.addeventlistener scroll this.scrollhandle scrollhandle 這裡一直觸發不了,而後查閱相關資料發現是在首頁做的乙個隱藏保護引起的 overflow hidd...

scroll事件頁面抖動 函式節流與函式防抖

思路 如果事件一直被觸發,也只在一定事件間隔才執行一次 scroll方法中當間隔時間大於2s,do somthing執行一次 window.addeventlistener scroll function 500 starttime curtime 也可以將節流函式封裝一下,我用的es6語法 節流函...