vue实现监听滚动条

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

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

18 ·

CC 4.0 BY-SA版权

技术（javascript）专栏收录该内容

114 篇文章

订阅专栏

本文介绍了如何在前端开发中正确地监听滚动事件，强调了在添加事件监听器时使用第三个参数的重要性，并提供了一个完整的示例，展示了如何通过原生JavaScript来获取滚动条的高度。

其实你百度了一下基本都是

 mounted() {
        window.addEventListener('scroll', this.handleScroll)
 },
 methods: {
        handleScroll() {
            console.log('a')
        }
 }

如何你复制过去基本不会调用handleScroll函数，其实这样写是没有错的。但是你要在后面第三个参数加上true，能成功监听。

 mounted() {
        window.addEventListener('scroll', this.handleScroll, true)
 },
 methods: {
        handleScroll() {
            console.log('a')
        }
 }

上面这样写了之后是可以获取scroll事件但是获取scroll都是0，最后百度了全部都是说什么是DTD的问题我也尝试了没有什么用

最后全部使用原生、然后把容器的css设置为全屏才可以实现(https://github.com/Aliceco/backTop)

mounted() {
   document.getElementById('orderFullScreen').addEventListener('scroll', this.handleScroll)
},
methods: {
    // 获取滚动条高度
    handleScroll() {
        console.log(document.getElementById('orderFullScreen').scrollTop)
    },
}