vue中監聽頁面滾動和監聽某元素滾動

2022-09-17 17:51:13 字數 809 閱讀 5309

①監聽頁面滾動

在生命週期mounted中進行監聽滾動:

mounted () ,
在方法中定義監聽滾動執行的方法:

scrolltotop() ,
記得在離開當前路由解綁scroll事件

beforeroutele**e(to, form, next)
②監聽某元素滾動

需要監聽的這個元素需要擁有固定的高度

vue元件中:

在方法中定義scrolldiv,是監聽class為read-con滾動以後需要執行的方法

scrollevent () ,
③ 獲取各個元素高度

獲取具體乙個元素的真實高度:

使用scrollheight的時候,如果scrollheight小於offsetheight的時候,高度就是offsetheight,只有超過offsetheight的時候才是scrollheight的高度,不管隱藏不隱藏內容

// 文件高度

let docheight = document.queryselector('.page').scrollheight;

獲取視窗高度:

// 視窗高度

let winheight = document.body.offsetheight;

vue中監聽頁面滾動和監聽某元素滾動

在生命週期 mounted 中進行監聽滾動 mounted 在方法中定義監聽滾動執行的方法 scrolltotop 注意 需要監聽的這個元素需要擁有固定的高度 在vue元件中 content scroll scrollevent div 在方法中定義scrolldiv,是監聽class為conten...

vue監聽滾動事件

vue中監聽滾動事件,然後對其進行事件處理,一般有 1.滾動到頂部吸附 2.根據滾動的位置啟用對應的tab鍵 錨鏈結tab鍵 這兩種方式的處理都是可通過監聽scroll來實現 mounted 處理方法 1.滾動到頂部吸附 html元素 這個是要滾動到頂部吸附的元素 methods方法 handles...

vue監聽滾動事件 實現某元素吸頂或者固定位置顯示

1 監聽滾動事件 利用vue寫乙個在控制台列印當前的scrolltop,首先,在mounted鉤子中給window新增乙個滾動滾動監聽事件,mounted 然後在方法中,新增這個handlescroll方法 handlescroll 2 監聽元素到頂部的距離 並判斷滾動的距離如果大於了元素到頂部的距...