vue如何監(jiān)聽頁面的滾動的開始和結(jié)束
監(jiān)聽頁面的滾動的開始和結(jié)束
export default { data() { return { oldScrollTop: 0, //記錄上一次滾動結(jié)束后的滾動距離 scrollTop: 0 // 記錄當前的滾動距離 } }, watch: { scrollTop(newValue, oldValue) { setTimeout(() => { if(newValue == window.scrollY) { //延時執(zhí)行后當newValue等于window.scrollY,代表滾動結(jié)束 console.log('滾動結(jié)束'); this.oldScrollTop = newValue; //每次滾動結(jié)束后都要給oldScrollTop賦值 }; }, 20); //必須使用延時器,否則每次newValue和window.scrollY都相等,無法判斷,20ms剛好大于watch的偵聽周期,故延時20ms if(this.oldScrollTop == oldValue) { //每次滾動開始時oldScrollTop與oldValue相等 console.log('滾動開始'); } } }, methods: { handleScroll() { window.addEventListener('scroll', () => { this.scrollTop = window.scrollY; }) } }, mounted() { this.handleScroll(); }, beforeDestroy() { window.removeEventListener('scroll'); //離開當前組件別忘記移除事件監(jiān)聽哦 } }
vue監(jiān)聽頁面滾動事件
方法:監(jiān)聽滾動實現(xiàn)
通過addEventListener方式監(jiān)聽
通過scroll獲取到滾動
export default { ?? ?data () { ?? ??? ?return { ?? ??? ??? ?topNavBg: { ? ? ? ? ?? ??? ?backgroundColor: '' ? ? ? ?? ??? ?} ?? ??? ?} ?? ?}, ?? ?// 滾動監(jiān)聽 ?? ?mounted () { ? ? ?? ?window.addEventListener('scroll', this.handleScroll) // 監(jiān)聽頁面滾動 ? ? }, ? ? methods: { ?? ??? ?// 獲取頁面滾動距離 ?? ? ? ?handleScroll () { ?? ? ? ? ? ?let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ?? ? ? ? ? ?console.log(scrollTop, '滾動距離') ?? ? ? ?} ?? ?}, ?? ?// 滾動重置 ? ? ?? ?beforeDestroy () { ? ? ? ?? ??? ?window.removeEventListener('scroll', this.handleScroll) ? ? ?? ?}, }
問題:監(jiān)聽不到頁面的滾動
現(xiàn)象:上述方法不可用,handleScroll只觸發(fā)一次,且scrollTop為0
原因:html,body的height設置有問題,因為限制了根元素高度,故而無法監(jiān)聽到滾動
// oldCode: 原代碼css中 body,html { ? width: 100%; ? height: 100vh; /或者 height: 100% } // newCode:新代碼改為 body,html { ? width: 100%; ? min-height: 100vh; /或者 min-height: 100% ; 不需要也可以去除 }
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
VUE如何實現(xiàn)點擊文字添加顏色(動態(tài)修改class)
這篇文章主要介紹了VUE如何實現(xiàn)點擊文字添加顏色(動態(tài)修改class),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11使用vue3+ts+setup獲取全局變量getCurrentInstance的方法實例
這篇文章主要給大家介紹了關于使用vue3+ts+setup獲取全局變量getCurrentInstance的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue3具有一定的參考學習價值,需要的朋友可以參考下2022-08-08移動端 Vue+Vant 的Uploader 實現(xiàn)上傳、壓縮、旋轉(zhuǎn)圖片功能
這篇文章主要介紹了移動端 Vue+Vant 的Uploader 實現(xiàn) 上傳、壓縮、旋轉(zhuǎn)圖片功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06vue2+el-menu實現(xiàn)路由跳轉(zhuǎn)及當前項的設置方法實例
這篇文章主要介紹了vue2+el-menu實現(xiàn)路由跳轉(zhuǎn)及當前項的設置,方法實例代碼詳解,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-11-11