VUE滚动条事件，监听滚动条位置，控制按钮显示隐藏

最新推荐文章于 2025-10-17 14:08:34 发布

原创最新推荐文章于 2025-10-17 14:08:34 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue应用中实现当页面滚动到一定距离时显示返回顶部的按钮，包括监听滚动条事件、获取滚动距离，以及处理组件封装后可能出现的问题和解决方案。

需求：有个返回顶部的按钮，当页面滚动到一定距离时才显示

第一步先监听滚动条事件：

  created() {
  
    //在窗口滚动时调用监听窗口滚动方法
    this.$nextTick(() => {
      window.addEventListener('scroll', this.windowScrollListener, true);
    })

  },

如果滚动条事件失效有可能是因为没有添加true的原因，这里true的作用是，如果不加true,那么这个事件就会在冒泡阶段执行导致失效. 默认为false,改为true的时候它就会在捕获阶段执行

第二步获取滚动条的滚动距离

data定义：

data(){
return{
      isVisable: false

}
}

事件：

   //监听窗口滚动
    windowScrollListener() {
      //获取操作元素最顶端到页面顶端的垂直距离
      var scrollTop = Math.floor(document.documentElement.scrollTop || document.body.scrollTop || document.querySelector('.app-main').scrollTop);
      // console.log(scrollTop, "scrollTop");
      if (scrollTop >= 480) {
        this.isVisable = true; //大于480时显示元素
      }
      if (scrollTop < 480) {
        this.isVisable = false; //小于480时隐藏元素
      }
    },

如果document.documentElement.scrollTop 或者 document.body.scrollTop一直为0，

原因：vue封装组件后，常常是在组件里面继续轮滑，而document.documentElement.scrollTop拿到的是最外层浏览器的轮滑高度，所有一直是0。

解决方法：通过 var scrollTop = document.querySelector("类名选择器").scrollTop;

以上步骤可百分百实现滚动条事件，亲测有效