快捷導(dǎo)航

vue如何監(jiān)聽頁面的滾動的開始和結(jié)束

更新時間：2022年07月27日 10:28:41 作者：高級前端工程師全站方向

這篇文章主要介紹了vue如何監(jiān)聽頁面的滾動的開始和結(jié)束，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

監(jiān)聽頁面的滾動的開始和結(jié)束

export default {
        data() {
            return {
                oldScrollTop: 0, //記錄上一次滾動結(jié)束后的滾動距離
                scrollTop: 0 // 記錄當(dāng)前的滾動距離
            }
        },
        watch: {
            scrollTop(newValue, oldValue) {
                setTimeout(() => {
                    if(newValue == window.scrollY) { //延時執(zhí)行后當(dāng)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'); //離開當(dāng)前組件別忘記移除事件監(jiān)聽哦
        }
    }

vue監(jiān)聽頁面滾動事件

方法：監(jiān)聽滾動實(shí)現(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設(shè)置有問題，因?yàn)橄拗屏烁馗叨?，故而無法監(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)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: