Vue实现某个元素监听滚动条失效问题（scrollTop一直等于0 ）

最新推荐文章于 2023-03-09 18:16:30 发布

我家媳妇儿萌哒哒

最新推荐文章于 2023-03-09 18:16:30 发布

阅读量1.9k

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44146522/article/details/117297467

版权

vue 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

这篇博客探讨了在JavaScript中使用addEventListener监听滚动事件时，为何需要将第三个参数设置为true才能生效。作者通过比较将事件绑定在window和元素上的不同，指出在元素上直接监听滚动可能无法正确获取滚动位置。为了解决这个问题，提出了利用window监听并获取指定元素的scrollTop值的方法，实现了根据滚动位置控制按钮显示和隐藏的功能。

摘要由CSDN通过智能技术生成

绑定在window上 addEventListener 事件需要第三个参数设置为true，不然事件不起作用

 mounted() {
    window.addEventListener('scroll',this.handleScroll,true)
  }
 methods: {
  handleScroll(){
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      console.log(scrollTop);
    }
}

绑定到元素上

mounted() {
    document.querySelector("#wrap").addEventListener('scroll',this.handleScroll)
 }
methods: {
  handleScroll(){
      let scrollTop = document.querySelector("#wrap").scrollTop;
      console.log(scrollTop);
    }
}

可是我试了之后发现window上可以监测到滚动条，但绑定到元素上不行，我突发奇想，是否可以先用window监测，在方法里获取元素的scrollTop，

mounted () {
    window.addEventListener('scroll', this.handleScroll, true)
},
methods: {
    //实现返回顶部的效果  控制按钮的显示和隐藏
    handleScroll () {
      let scrollTop = document.getElementById('homemain').scrollTop;
      let clientHeight = document.getElementById('homemain').clientHeight;
      let scrollHeight = document.getElementById('homemain').scrollHeight;
      //滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。
      if ((scrollTop + clientHeight) > (scrollHeight / 2)) {
        this.isUp = true
      } else {
        this.isUp = false
      }
    }
}