vue如何監(jiān)聽(tīng)頁(yè)面的滾動(dòng)的開(kāi)始和結(jié)束
監(jiān)聽(tīng)頁(yè)面的滾動(dòng)的開(kāi)始和結(jié)束
export default { data() { return { oldScrollTop: 0, //記錄上一次滾動(dòng)結(jié)束后的滾動(dòng)距離 scrollTop: 0 // 記錄當(dāng)前的滾動(dòng)距離 } }, watch: { scrollTop(newValue, oldValue) { setTimeout(() => { if(newValue == window.scrollY) { //延時(shí)執(zhí)行后當(dāng)newValue等于window.scrollY,代表滾動(dòng)結(jié)束 console.log('滾動(dòng)結(jié)束'); this.oldScrollTop = newValue; //每次滾動(dòng)結(jié)束后都要給oldScrollTop賦值 }; }, 20); //必須使用延時(shí)器,否則每次newValue和window.scrollY都相等,無(wú)法判斷,20ms剛好大于watch的偵聽(tīng)周期,故延時(shí)20ms if(this.oldScrollTop == oldValue) { //每次滾動(dòng)開(kāi)始時(shí)oldScrollTop與oldValue相等 console.log('滾動(dòng)開(kāi)始'); } } }, methods: { handleScroll() { window.addEventListener('scroll', () => { this.scrollTop = window.scrollY; }) } }, mounted() { this.handleScroll(); }, beforeDestroy() { window.removeEventListener('scroll'); //離開(kāi)當(dāng)前組件別忘記移除事件監(jiān)聽(tīng)哦 } }
vue監(jiān)聽(tīng)頁(yè)面滾動(dòng)事件
方法:監(jiān)聽(tīng)滾動(dòng)實(shí)現(xiàn)
通過(guò)addEventListener方式監(jiān)聽(tīng)
通過(guò)scroll獲取到滾動(dòng)
export default { ?? ?data () { ?? ??? ?return { ?? ??? ??? ?topNavBg: { ? ? ? ? ?? ??? ?backgroundColor: '' ? ? ? ?? ??? ?} ?? ??? ?} ?? ?}, ?? ?// 滾動(dòng)監(jiān)聽(tīng) ?? ?mounted () { ? ? ?? ?window.addEventListener('scroll', this.handleScroll) // 監(jiān)聽(tīng)頁(yè)面滾動(dòng) ? ? }, ? ? methods: { ?? ??? ?// 獲取頁(yè)面滾動(dòng)距離 ?? ? ? ?handleScroll () { ?? ? ? ? ? ?let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ?? ? ? ? ? ?console.log(scrollTop, '滾動(dòng)距離') ?? ? ? ?} ?? ?}, ?? ?// 滾動(dòng)重置 ? ? ?? ?beforeDestroy () { ? ? ? ?? ??? ?window.removeEventListener('scroll', this.handleScroll) ? ? ?? ?}, }
問(wèn)題:監(jiān)聽(tīng)不到頁(yè)面的滾動(dòng)
現(xiàn)象:上述方法不可用,handleScroll只觸發(fā)一次,且scrollTop為0
原因:html,body的height設(shè)置有問(wèn)題,因?yàn)橄拗屏烁馗叨龋识鵁o(wú)法監(jiān)聽(tīng)到滾動(dòng)
// oldCode: 原代碼css中 body,html { ? width: 100%; ? height: 100vh; /或者 height: 100% } // newCode:新代碼改為 body,html { ? width: 100%; ? min-height: 100vh; /或者 min-height: 100% ; 不需要也可以去除 }
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
VUE如何實(shí)現(xiàn)點(diǎn)擊文字添加顏色(動(dòng)態(tài)修改class)
這篇文章主要介紹了VUE如何實(shí)現(xiàn)點(diǎn)擊文字添加顏色(動(dòng)態(tài)修改class),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11使用vue3+ts+setup獲取全局變量getCurrentInstance的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于使用vue3+ts+setup獲取全局變量getCurrentInstance的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-08-08Vue3.0寫(xiě)自定義指令的簡(jiǎn)單步驟記錄
Vue中除了內(nèi)置指令,也允許注冊(cè)自定義的指令,下面這篇文章主要給大家介紹了關(guān)于Vue3.0寫(xiě)自定義指令的相關(guān)資料,需要的朋友可以參考下2021-06-06vue或css動(dòng)畫(huà)實(shí)現(xiàn)列表向上無(wú)縫滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue或css動(dòng)畫(huà)實(shí)現(xiàn)列表向上無(wú)縫滾動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue3.0中使用element UI表單遍歷校驗(yàn)問(wèn)題解決
本文主要介紹了vue3.0中使用element UI表單遍歷校驗(yàn)問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04移動(dòng)端 Vue+Vant 的Uploader 實(shí)現(xiàn)上傳、壓縮、旋轉(zhuǎn)圖片功能
這篇文章主要介紹了移動(dòng)端 Vue+Vant 的Uploader 實(shí)現(xiàn) 上傳、壓縮、旋轉(zhuǎn)圖片功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06vue2+el-menu實(shí)現(xiàn)路由跳轉(zhuǎn)及當(dāng)前項(xiàng)的設(shè)置方法實(shí)例
這篇文章主要介紹了vue2+el-menu實(shí)現(xiàn)路由跳轉(zhuǎn)及當(dāng)前項(xiàng)的設(shè)置,方法實(shí)例代碼詳解,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11web項(xiàng)目開(kāi)發(fā)中2個(gè)Token原因解析及示例代碼
這篇文章主要介紹了web項(xiàng)目開(kāi)發(fā)中會(huì)出現(xiàn)2個(gè)Token原因的解析以及實(shí)現(xiàn)的示例代碼,有需要的同學(xué)可以借鑒參考下,希望可以有所幫助2021-09-09vueScroll實(shí)現(xiàn)移動(dòng)端下拉刷新、上拉加載
這篇文章主要介紹了vueScroll實(shí)現(xiàn)移動(dòng)端下拉刷新、上拉加載,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03