[vue] 监听滑动: 监听整个窗口（window）的滑动, 监听元素的滑动

最新推荐文章于 2023-08-10 16:55:08 发布

533_

最新推荐文章于 2023-08-10 16:55:08 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_14993591/article/details/126010741

vue 专栏收录该内容

175 篇文章

订阅专栏

这篇博客介绍了如何在JavaScript中监听窗口和特定元素的滚动事件。通过`window.addEventListener('scroll')`可以监听整个窗口的滚动，而`document.querySelector('#id').addEventListener('scroll')`则用于监听指定ID元素的滚动。在`handleScroll`方法中，获取并打印了滚动的垂直位置（scrollTop），这对于实现页面动态效果或滚动定位很有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、监听整个窗口（window）的滑动

mounted() {
   window.addEventListener('scroll',this.handleScroll,true)
}

 methods: {
  handleScroll(){
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      console.log(scrollTop);
    }
}

2、监听元素的滑动

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