下拉加载更多内容（滚动加载）

Posted 2020-10-05 前端知识随笔

　　最近写项目，要求实现滚动条滚动到底部的时候请求加载更多的数据。要实现此功能首先想到的就是scroll事件，经过查阅资料终于实现此功能，具体原理如下：

首先需要给div加scroll事件，监听滚动条滚动动作。滚动加载的原理：当滚动条的高度加上 滚动条到div顶部的高度 等于div的可滚动高度时，说明滚动条到底部了，此时便可以触发向服务端请求数据的ajax请求了。

　　判断滚动条是否滚动到底部：

this.scrollHeight<=$(this).scrollTop()+$(this).height();

注：如果等滚动条滚动到底部时再加载，会影响用户的体验。因为一般动态加载的时候都需要向服务端请求资源，这时需要时间。一个更佳的方式是：当滚动条距离底部一定距离（C）时，就开始动态加载即向服务器请求资源。也就是预加载，预读取。代码即：

this.scrollHeight-C ==$(this).scrollTop()+$(this).height();

完整的滚动加载代码即：

$("滚动区域ID").unbind("scroll").bind("scroll", function(e){  
     var sum = this.scrollHeight;  
     if (sum <= $(this).scrollTop() + $(this).height()) {  
        $.ajax({获取数据的逻辑代码})
      }  
 });

注：该方法在使用之前首先需要引入jQuery.js;

$(this).unbind(‘scroll‘).bind(‘scroll‘,function(){}）这样写是为了避免重复绑定。