Vue的Scroll滾動事件觸發(fā)方式
Scroll滾動事件觸發(fā)
切記 當(dāng)你需要滾動事件觸發(fā) 千萬不要加 overflow-y: auto; 一旦加了 就 全是 0
例子
去掉 overflow-y: auto;
如果你需要把這個頁面當(dāng)做子組件引入 需要加true 因為 ···· 請看最后一張圖片 如果不加true 不變成捕獲事件 則無法成功引用
<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寫一個在控制臺打印當(dāng)前的scrollTop。首先,在 mounted 鉤子中給window添加一個滾動滾動監(jiān)聽事件 ?? ?mounted() { ?? ??? ?window.addEventListener("scroll", this.scrollToTop,true); ?? ??? ?//如果你需要把這個頁面當(dāng)做子組件引入 需要加true 因為 ···· ?請看最后一張圖片 ?? ?}, ?? ?destroyed() { ?? ??? ?window.removeEventListener("scroll", this.scrollToTop,true); ?? ?}, ?? ?methods: { ?? ??? ?// 點擊圖片回到頂部方法,加計時器是為了過渡順滑 ?? ??? ?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)聽回到頂部按鈕距瀏覽器頂部的距離,滾動的距離如果大于瀏覽器高度時,設(shè)置 btnFlag 為true,否則就是false ?? ??? ?scrollToTop() { ?? ??? ??? ?let that = this; ?? ??? ??? ?let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; ?? ??? ??? ?that.scrollTop = scrollTop; ?? ??? ??? ?console.log(scrollTop) ?? ??? ??? ?//為了計算距離頂部的高度,當(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)聽Scroll事件無效
1.監(jiān)聽的dom元素設(shè)定高度,子元素的內(nèi)容要超過容器的高度
2.設(shè)定overflow為:auto/scroll,默認(rèn)值為visible,無法觸發(fā)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue彈窗組件的使用(傳值),以及彈窗只能觸發(fā)一次的問題
這篇文章主要介紹了vue彈窗組件的使用(傳值),以及彈窗只能觸發(fā)一次的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05Vue+Bootstrap實現(xiàn)簡易學(xué)生管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了Vue+Bootstrap實現(xiàn)簡易學(xué)生管理系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-02-02