Vue的Scroll滾動(dòng)事件觸發(fā)方式是什么

這篇文章主要介紹了Vue的Scroll滾動(dòng)事件觸發(fā)方式是什么的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Vue的Scroll滾動(dòng)事件觸發(fā)方式是什么文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

Scroll滾動(dòng)事件觸發(fā)

切記 當(dāng)你需要滾動(dòng)事件觸發(fā) 千萬(wàn)不要加 overflow-y: auto; 一旦加了 就 全是 0

例子

去掉 overflow-y: auto;

如果你需要把這個(gè)頁(yè)面當(dāng)做子組件引入 需要加true 因?yàn)?···· 請(qǐng)看最后一張圖片 如果不加true 不變成捕獲事件 則無(wú)法成功引用

<template>
    <div class="totop">
        <div class="btnTop" v-if="btnFlag" @click="backTop()">
            <van-icon name="arrow-up" size="40" color="#CF9B6B" class="imga"/>
        </div>
    </div>
</template>

<script>
export default {
    name: "totop",
    data() {
        return {
            btnFlag: false,
        };
    },
    // 利用VUE寫(xiě)一個(gè)在控制臺(tái)打印當(dāng)前的scrollTop。首先，在 mounted 鉤子中給window添加一個(gè)滾動(dòng)滾動(dòng)監(jiān)聽(tīng)事件
    mounted() {
        window.addEventListener("scroll", this.scrollToTop,true);
        //如果你需要把這個(gè)頁(yè)面當(dāng)做子組件引入 需要加true 因?yàn)?nbsp;····  請(qǐng)看最后一張圖片
    },
    destroyed() {
        window.removeEventListener("scroll", this.scrollToTop,true);
    },
    methods: {
        // 點(diǎn)擊圖片回到頂部方法，加計(jì)時(shí)器是為了過(guò)渡順滑
        backTop() {
            let that = this;
            let timer = setInterval(() => {
                let ispeed = Math.floor(-that.scrollTop / 5);
                document.documentElement.scrollTop = document.body.scrollTop =
                        that.scrollTop + ispeed;
                if (that.scrollTop === 0) {
                    clearInterval(timer);
                }
            }, 16);
        },
        // 監(jiān)聽(tīng)回到頂部按鈕距瀏覽器頂部的距離，滾動(dòng)的距離如果大于瀏覽器高度時(shí)，設(shè)置 btnFlag 為true,否則就是false
        scrollToTop() {
            let that = this;
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            that.scrollTop = scrollTop;
            console.log(scrollTop)
            //為了計(jì)算距離頂部的高度，當(dāng)高度大于50顯示回頂部圖標(biāo)，小于50則隱藏
            if (that.scrollTop > 50) {
                that.btnFlag = true;
            } else {
                that.btnFlag = false;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.totop {
    position: fixed;
    right: 40px;
    bottom: 60px;
    width: 50px;
    height: 50px;
    padding: 10px;
    cursor: pointer;
}
.imga {
    position: relative;
    top: -20px;
    left: 15px;
    text-align: center;
    line-height: 50px;
    border: 3px solid #CF9B6B;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
</style>

監(jiān)聽(tīng)Scroll事件無(wú)效

1.監(jiān)聽(tīng)的dom元素設(shè)定高度，子元素的內(nèi)容要超過(guò)容器的高度

2.設(shè)定overflow為:auto/scroll，默認(rèn)值為visible，無(wú)法觸發(fā)

關(guān)于“Vue的Scroll滾動(dòng)事件觸發(fā)方式是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Vue的Scroll滾動(dòng)事件觸發(fā)方式是什么”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。