使用vue判断页面滚动方向

最新推荐文章于 2026-02-11 06:40:47 发布

原创最新推荐文章于 2026-02-11 06:40:47 发布 · 1.9k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

当前文章被收录于：

前端

26 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何在Vue.js应用程序中检测用户滚动页面的方向，从而实现动态效果或优化用户体验。通过监听滚动事件并比较滚动位置，可以轻松判断是向上还是向下滚动。


	<div id="form1" class="whiteBox pagemain" ref="rightContent">
		// 页面内容
	</div>

	new Vue({
		el: '#form1',
        data: {
        	i:0
		},
 		mounted: function () {
        	this.$refs.rightContent.addEventListener('scroll', this.handleScroll, true);
                // 监听（绑定）滚轮 滚动事件
        },
        methods: {
        	handleScroll: function () {                  
            	// 页面滚动距顶部距离
                var scrollTop = this.$refs.rightContent.scrollTop;
                var scroll = scrollTop - this.i;
                this.i = scrollTop;
                if (scroll < 0) {
                	console.log("up");
                } else {
                    console.log("down");
                }
        	},
	})