vue关于滚动事件 v-on:scroll

最新推荐文章于 2025-08-26 15:46:08 发布

原创最新推荐文章于 2025-08-26 15:46:08 发布 · 924 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html

js 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了在Vue.js中如何实现全局和局部的滚动事件监听。在组件的`created`钩子中，使用`window.addEventListener`进行全局监听。而针对特定DOM元素，如`viewBox`的`div`，可以通过`$refs`获取并添加局部监听。示例中展示了如何打印局部监听元素的`scrollTop`属性，这对于实现滚动效果、滚动加载等场景非常有用。

vue关于滚动页面

全局监听滚动

created() {
var _this = this;	    
window.addEventListener('scroll',()=>{//触发事件},true);
}

局部监听

<!--添加ref-->
<div class="headcol" ref="viewBox">
    <table>
        <thead>
            <tr >
                <td v-for="c in list.header">
                    {{c}}
                </td>
            </tr>
        </thead>
        <tbody>
            <tr  v-for="r in list.rows">
                <td v-for="c in r">
                    {{c}}
                </td>
            </tr>
        </tbody>
    </table>
</div>

// 首先通过$refs获取dom元素
this.box = this.$refs.viewBox
// 监听这个dom的scroll事件
this.box.addEventListener('scroll', () => {
  console.log(this.$refs.viewBox.scrollTop)
}, false)