您好,登錄后才能下訂單哦!
這篇文章主要介紹了Vue的Scroll滾動(dòng)事件觸發(fā)方式是什么的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡(jiǎn)單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇Vue的Scroll滾動(dòng)事件觸發(fā)方式是什么文章都會(huì)有所收獲,下面我們一起來(lái)看看吧。
切記 當(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>
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è)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。