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

所以请为每一个页面声明Doctype不仅仅是一个好习惯，而且是一个必要的处理。Quirks Mode可以进垃圾堆了。

当用户滚动元素中到一个不同的地方时，scroll事件将发送到这个元素。它适用于window对象，但也可滚动框架与CSS overflow属性设置为scroll的元素。

1、普通的div滚动到底部加载更多的方法

<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的div怎么样也不能接受scroll时间，最后经过查找资料和测试，发现要给div加上overflow和height的属性。

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

2、window滚动事件：

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。