Vue的Scroll滾動事件觸發(fā)方式

更新時間：2022年04月23日 14:06:18 作者：Daniel·M

這篇文章主要介紹了Vue的Scroll滾動事件觸發(fā)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Scroll滾動事件觸發(fā)

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

例子

去掉 overflow-y: auto;

如果你需要把這個頁面當(dāng)做子組件引入需要加true 因?yàn)?···· 請看最后一張圖片如果不加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 因?yàn)?···· ?請看最后一張圖片
?? ?},
?? ?destroyed() {
?? ??? ?window.removeEventListener("scroll", this.scrollToTop,true);
?? ?},
?? ?methods: {
?? ??? ?// 點(diǎn)擊圖片回到頂部方法，加計時器是為了過渡順滑
?? ??? ?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>