1、監聽滾動事件
利用vue寫乙個在控制台列印當前的scrolltop,
首先,在mounted鉤子中給window新增乙個滾動滾動監聽事件,
mounted () ,
然後在方法中,新增這個handlescroll方法
handlescroll () ,
2、監聽元素到頂部的距離 並判斷滾動的距離如果大於了元素到頂部的距離時,設定searchbar為true,否則就是false
handlescroll () ,
先寫乙個該元素固定到頂部的樣式,isfixed(less寫法)
#searchbar
}
然後將需要固定的元素的class與searchbar進行繫結,如果searchbar為true時,就應用這個isfixed樣式
固定後的結果:
注意,如果離開該頁面需要移除這個監聽的事件,不然會報錯。
destroyed () ,
vue監聽滾動事件 實現某元素吸頂或者固定位置顯示
1 監聽滾動事件 利用vue寫乙個在控制台列印當前的scrolltop,首先,在mounted鉤子中給window新增乙個滾動滾動監聽事件,mounted function 然後在方法中,新增這個handlescroll方法 2 監聽元素到頂部的距離 並判斷滾動的距離如果大於了元素到頂部的距離時,設...
vue監聽滾動事件 實現某元素吸頂或者固定位置顯示
1 監聽滾動事件 利用vue寫乙個在控制台列印當前的scrolltop,首先,在mounted鉤子中給window新增乙個滾動滾動監聽事件,mounted 然後在方法中,新增這個handlescroll方法 handlescroll 控制台列印結果 2 監聽元素到頂部的距離 並判斷滾動的距離如果大於...
vue中監聽頁面滾動和監聽某元素滾動
在生命週期 mounted 中進行監聽滾動 mounted 在方法中定義監聽滾動執行的方法 scrolltotop 注意 需要監聽的這個元素需要擁有固定的高度 在vue元件中 content scroll scrollevent div 在方法中定義scrolldiv,是監聽class為conten...