vue中如何监听回到顶部滚动事件

vue中如何监听回到顶部滚动事件

这篇文章主要讲解了“vue中如何监听回到顶部滚动事件”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue中如何监听回到顶部滚动事件”吧！

鼠标滚到到页面中间出现的工具浮框

<template>  <div class="tools">  <ul @mouseleave="mouseLeave()">  <li @click="toTop(step)">回到顶部</li>  <li @mouseover="mouseOver(1)">QQ</li>  <li @mouseover="mouseOver(2)">微信</li>  </ul>  <div v-if="showIndex === 1">玩QQ</div>  <div v-if="showIndex === 2">玩微信</div>  </div>  </template>

<script>  export default {   name: 'FloatTools',   props: {   step: { //此数据是控制动画快慢的    type: Number,    default: 50   }   },   data() {   return {    isActive: false,    showIndex:0//默认显示下标   }   },   methods: {   toTop(i) {    //参数i表示间隔的幅度大小，以此来控制速度     document.documentElement.scrollTop -= i;    if (document.documentElement.scrollTop > 0) {    var c = setTimeout(() => this.toTop(i), 16);    } else {    clearTimeout(c);    }   },   handleScroll() {    //获取滚动距顶部的距离，显示    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop；    if (scrollTop > 60) {    this.isActive = true;    } else {    this.isActive = false;    }   },   mouseOver(index) {   //鼠标移到哪个工具上，对应内容显示出来    this.showIndex = index;   },   mouseLeave(){   //鼠标移出工具区域后1秒，内容区域消失     let timer = setTimeout(() => {     this.showIndex = 0;     clearTimeout(timer)    }, 500);   }   },   mounted: function () {   window.addEventListener('scroll', this.handleScroll, true); // 监听（绑定）滚轮滚动事件   },   destroyed() {   window.removeEventListener('scroll', this.handleScroll); //离开页面需要移除这个监听的事件   }    }  </script>

如果遇到scroll一直打印是0，看是否样式写了overflow：auto去掉即可；或者给父级撑满屏幕。

感谢各位的阅读，以上就是“vue中如何监听回到顶部滚动事件”的内容了，经过本文的学习后，相信大家对vue中如何监听回到顶部滚动事件这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是高防服务器网，小编将为大家推送更多相关知识点的文章，欢迎关注！

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[