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();
  }
});