vue 项目添加滚动监听事件

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

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

3 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现滚动监听的实例。通过在mounted生命周期钩子中添加window滚动事件监听器，并在destroyed钩子中移除监听器，避免了内存泄漏和其他.vue文件受到影响。示例代码展示了如何在滚动时调用scrollMethod方法来记录滚动位置。

代码如下

<template>
    <div>
        <p v-for="index in 100" :key="index">滚动监听</p>
    </div>
</template>
<script>
export default {
    methods: {
        scrollMethod() {
            console.log('滚动监听')
            console.log(document.documentElement.scrollTop)
        }
    },
    mounted() {
        // 挂载时，添加监听滚动事件，然后用 scrollMethod 方法进行处理
        window.addEventListener('scroll',this.scrollMethod) 
    },
    destroyed() {
        // 销毁时，删除监听滚动事件，否则其他.vue文件也会受影响
        window.removeEventListener('scroll',this.scrollMethod)
    }
}
</script>

运行效果