jQuery实现当拉动滚动条到底部加载数据的方法分析

$(window).on('scroll',function(){
 if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
 loadMore();
 }
});

//获取页面顶部被卷起来的高度
function scrollTop(){
 return Math.max(
 //chrome
 document.body.scrollTop,
 //firefox/IE
 document.documentElement.scrollTop);
}

//获取页面文档的总高度
function documentHeight(){
 //现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
 return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}

function windowHeight(){
 return (document.compatMode == "CSS1Compat")?
 document.documentElement.clientHeight:
 document.body.clientHeight;
}

<div id="test">内容</div>

$('#test').scroll(function(event){
 var top = $(this).scrollTop();
 var height = $(this).height();
 var scrollHeight = $(this).get(0).scrollHeight;
 if(scrollHeight <= top+height){
 loadMore();
 }
});

#test{
 overflow:scroll;
 height:655px;
}

$(window).scroll(function () {
 var scrollTop = $(window).scrollTop(); // 滚动条距离顶部的高度
 //scrollHeight,windowHeight,scrollHeight1三个height相同，都是这个页面的高度
 var scrollHeight = $(document).height(); // 当前页面的总高度
 var windowHeight = $(window).height(); // 当前可视的页面高度，jquery获取的不是屏幕的高度，而是整个文档的高度
 var scrollHeight1 = $("#test").get(0).scrollHeight;
 var windowidth = $(window).width();
 var documentwidtht = $(document).width() ;
 var innerHeight = window.innerHeight; //window的高度，即手机的高度
 var clientHeight = document.body.clientHeight; //window的高度
 var clientHeight1 = document.documentElement.clientHeight;//这个是body的整个高度，chrom测试
 if(scrollTop + innerHeight >= scrollHeight){ // 距离顶部+当前高度 >=文档总高度，即代表滑动到底部
 loadMore();
 }
});