監聽滾動條事件

2022-06-22 17:54:10 字數 648 閱讀 3187

今天遇到需要監聽滾動條事件的問題,本來以為是乙個簡單的監聽就好了,哪成想,這麼多bug,說到底還是自己基礎不紮實,所以趁現在下班沒事把它記錄下來。以備後續所需,哈哈。

(1)首先是最基本的監聽事件

methods: }},

mounted()

mounted()  //後面的 true 則是第三個引數
然後就可以出來了(下圖便是)

(3)然後!重點來了,因為做的是手機端嗎,為了他的滾動流暢度,於是就給頁面最大的容器加了「overflow: scroll」 ,咦~ 又不出來了,這個愁毀我了,然後又是一通找資料,於是就解決了,哈哈

methods:  else }},

mounted() ,

destroyed() //關閉頁面時需要移除監聽事件

至於,為什麼這麼寫,我的想法是,因為這個是在單獨的乙個元件中,所以沒有辦法獲取滾動條,但是當他的根元素e 傳給他之後,就用e 來代替嘍。我也不知道這麼理解對不對,希望各位大佬,可以幫忙給解釋一下。謝謝!!!

滾動條事件

width 設定或返回元素的寬度。不包含margin padding和border height 設定或返回元素的高度。不包含margin padding和border innerwidth 返回元素的內部寬度,包含 padding,但不包含margin和border innerheight 返回元...

移動端顯示滾動條以及滾動條的監聽事件

1 移動端顯示滾動條 在移動端滾動條缺省會隱藏,如何顯示呢 需要新增以下 了。並且需要給body或者外層盒子新增 rows 類名,這樣滾動條就可以顯示出來了 rows rows webkit scrollbar track piece rows webkit scrollbar rows webki...

vue專案中實現監聽滾動條滾動事件並滾動到固定位置

研究了兩天,終於實現了自己想要的功能,先說這個功能就是監聽滾動條,讓他到達某個位置後停止,比如吸頂功能。這個功能我在網上查了兩天,基本沒有我想要的效果,全是吸頂的,無奈做了更多的功課。還有一種方法可以實現,就是position sticky。話不多說直接看效果圖 一 效果圖 就是標記這一塊,拉到下面...