使用vue判断页面滚动方向

最新推荐文章于 2025-01-12 09:49:05 发布

Zan^Z

最新推荐文章于 2025-01-12 09:49:05 发布

阅读量1.8k

点赞数

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

本文链接：https://blog.youkuaiyun.com/Zan_Z/article/details/106838322

版权

前端专栏收录该内容

26 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


	<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");
                }
        	},
	})