HTML页面实现鼠标无限滚动下拉

最新推荐文章于 2024-04-02 15:06:36 发布

原创最新推荐文章于 2024-04-02 15:06:36 发布 · 7.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#鼠标滚轮 #滚动查看

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在HTML页面中实现鼠标滚轮无限下拉加载功能。通过监听滚动条位置，当达到页面底部时触发后台数据查询，实现日志在线查看的无缝滚动效果。

做一个日志在线查看的功能，需要无限下拉的功能。
前提条件：页面必须有滚动条
贴一下代码。
前台页面：

	<!-- 显示内容 -->
	<div class="container" id="container"></div>
	<!-- 显示提示信息 -->
	<div class="nodata" id="nodata"></div>

js代码：
主要是判断滚动条是否到了底部，到了的话，就触发后台数据查询事件。

//滚动条在Y轴上的滚动距离
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;
}

//js原生监听 滚动事件的---因为项目框架和jquery不兼容
window.onscroll = function() {
    if(getScrollTop() + getWindowHeight() == getScrollHeight()){
    	//这里调用你查询数据和加载数据的代码
	}
}

完工