js页面滑到底部触发事件

最新推荐文章于 2023-10-31 23:13:34 发布

原创最新推荐文章于 2023-10-31 23:13:34 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

HTML5前端专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一种在网页中实现滚动到底部自动加载更多内容的技术方案。通过JavaScript获取页面滚动位置、视口高度及文档总高度，判断是否已滚动到页面底部，并触发加载更多数据的函数。适用于各种需要无限滚动加载的应用场景。

function getScrollTop(){
	　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
	　　if(document.body){
	　　　　bodyScrollTop = document.body.scrollTop;
	　　}
	　　if(document.documentElement){
	　　　　documentScrollTop = document.documentElement.scrollTop;
	　　}
	　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
	　　return scrollTop;
	}
	//文档的总高度
	function getScrollHeight(){
	　　var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
	　　if(document.body){
	　　　　bodyScrollHeight = document.body.scrollHeight;
	　　}
	　　if(document.documentElement){
	　　　　documentScrollHeight = document.documentElement.scrollHeight;
	　　}
	　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
	　　return scrollHeight;
	}
	//浏览器视口的高度
	function getWindowHeight(){
	　　var windowHeight = 0;
	　　if(document.compatMode == "CSS1Compat"){
	　　　　windowHeight = document.documentElement.clientHeight;
	　　}else{
	　　　　windowHeight = document.body.clientHeight;
	　　}
	　　return windowHeight;
	}
	

	window.onscroll = function(){
	　　if(getScrollTop() + getWindowHeight() == getScrollHeight()){
	　　　moreReconmend();
	//	console.log("getScrollTop:"+getScrollTop()+"**getWindowHeight:"+getWindowHeight()+"**getScrollHeight:"+getScrollHeight())
	　　}
	};