vue监听滚动开始与结束

李子建

于 2020-10-29 19:41:18 发布

阅读量1.8k

点赞数 2

分类专栏：滚动文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_42835782/article/details/109367474

版权

滚动专栏收录该内容

1 篇文章

订阅专栏

这篇博客探讨了JavaScript中如何监听和处理页面滚动事件。通过设置`scrollTop`和`oldScrollTop`属性，我们可以捕捉滚动开始和结束的瞬间。在滚动结束时，利用延时器确保滚动状态稳定，并更新`tran_flag`标志。同时，当滚动开始时，如果`oldScrollTop`和`oldValue`相等，标记滚动开始。这个方法对于实现基于滚动的动态效果或优化性能很有帮助。

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

data{
oldScrollTop: 0, //记录上一次滚动结束后的滚动距离
scrollTop: 0 ,// 记录当前的滚动距离
}

watch: {
			scrollTop(newValue, oldValue) {
				setTimeout(() => {
					if(newValue == window.scrollY) { //延时执行后当newValue等于window.scrollY，代表滚动结束
						console.log('滚动结束');
						this.oldScrollTop = newValue; //每次滚动结束后都要给oldScrollTop赋值
						this.tran_flag=true;
					};
				}, 200); //必须使用延时器，否则每次newValue和window.scrollY都相等，无法判断，20ms刚好大于watch的侦听周期，故延时20ms
				if(this.oldScrollTop == oldValue) { //每次滚动开始时oldScrollTop与oldValue相等
					console.log('滚动开始');
					this.tran_flag=false;
				}
			}
		},

methods: {
			handleScroll() {
				window.addEventListener('scroll', () => {
					this.scrollTop = window.scrollY;
				})
			},
		}

beforeDestroy() {
			window.removeEventListener('scroll',() => {
					this.scrollTop = window.scrollY;
				}); //离开当前组件别忘记移除事件监听哦
		}