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

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

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

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()){
    	//这里调用你查询数据和加载数据的代码
	}
}