vue获取滚动条事件并获取滚动条高度

最新推荐文章于 2024-06-05 17:56:57 发布

前端-文龙刚

最新推荐文章于 2024-06-05 17:56:57 发布

阅读量3.2k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_17211063/article/details/125198203

版权

Vue 专栏收录该内容

97 篇文章 2 订阅

订阅专栏

该博客主要探讨了如何在Vue应用中监听页面滚动事件，并实时获取滚动条的高度。通过`data`属性定义`scrollTop`，并在`created`和`beforeDestroy`钩子函数中分别添加和移除事件监听器。`handleScroll`方法用于处理滚动事件，记录并打印滚动条的当前高度。这是一个关于前端开发中事件处理和页面交互的基础示例。

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

data(){
    return{
        scrollTop:'',
    }
}



created() {
    this.listenerFunction();
},
beforeDestroy () {
    document.removeEventListener("scroll", this.listenerFunction);
},
methods: {
    listenerFunction(e) {
        document.addEventListener('scroll', this.handleScroll, true);
    },
    handleScroll (event) {
        console.log("滚动条高度为：",event.target.scrollTop)
        this.scrollTop=event.target.scrollTop
    },
}