jsjquery控制页⾯动态加载数据滑动滚动条⾃动加载事件
的⽅法
js控制滚动条页⾯滚动动态加载数据，页⾯下拉⾃动加载内容
相信很多⼈都见过瀑布流图⽚布局，那些图⽚是动态加载出来的，效果很好，对服务器的压⼒相对来说也⼩了很多
有⼿机的相信都见过这样的效果：进⼊qq空间，向下拉动空间，到底部时，会动态加载剩余的说说或者是⽇志
今天我们就来看看他们的实现思路和js控制动态加载的代码
下⾯的代码主要是控制滚动条下拉时的加载事件的
在下⾯代码说明出，写上你的操作即可，⽆论是加载图⽚还是加载记录数据都可以
别忘了引⽤jquery类库
$(window).scroll(function () {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (scrollTop + windowHeight == scrollHeight) {
  //此处是滚动条到底部时候触发的事件，在这⾥写要加载的数据，或者是拉动滚动条的操作
      //var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;
      //redgiftList(page);
      //$("#redgiftNextPage").attr('currentpage', page + 1);
}
});
解析：
判断滚动条到底部，需要⽤到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。
scrollTop为滚动条在Y轴上的滚动距离。
clientHeight为内容可视区域的⾼度。
scrollHeight为内容可视区域的⾼度加上溢出（滚动）的距离。
从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。（兼容不同的浏览器）。
以上这篇js/jquery控制页⾯动态加载数据滑动滚动条⾃动加载事件的⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。