Vue项目中计算当前元素内滚动条是否滚动到页面底部。

最新推荐文章于 2023-03-13 17:05:40 发布

原创最新推荐文章于 2023-03-13 17:05:40 发布 · 261 阅读

0 ·

CC 4.0 BY-SA版权

小知识专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的滚动监听技术，当用户滚动到页面底部时触发加载更多功能。通过监听滚动事件并计算距离底部的距离来判断是否加载新内容。

template

<div class="sider-main" ref="reviewRef">
	<div class="slider-item"></div>
	<div class="slider-item"></div>
	<div class="slider-item"></div>
	<div class="slider-item"></div>
	<div class="slider-item"></div>
	<div class="slider-item"></div>
	<div class="slider-item"></div>
	<div class="slider-item"></div>
	<!-- .....若干个div -->
</div>
<style>
	.sider-main{
		height:100vh;
		overflow-y:scroll;
	}
</style>

this.$nextTick(()=>{
	this.$refs.reviewRef.addEventListener('scroll',(e)=>{
		// 计算是否触底
		let h = e.target.offsetHeight+e.target.scrollTop-e.target.scrollHeight
		//console.log(h)
		if(h>-1){
			//do something...
		}
	})
})