Jquery实现滚动加载

个人观点仅参考

jquery实现滚动加载的核心如何知道滚动条是否到达底部。

• 针对固定高度的容器添加scroll事件，获取容器中滚动条的距离顶部高度t，固定容器的高度h。
• 获取文档内容高度scrollHeight，当滚动条滚到底部时。
  必然是: scrollHeight = t + h;
• 改进用户体验，一般是滚动条滑动到距离底部一定距离c时,就进行数据加载。
  此时则改成: scrollHeight - c = t + h;

HTML

<div id="box">
    <div id="list">
        <div>1</div>
    </div>
    <div id="loading">正在加载...</div>
</div>

css

html,body {
  height: 100%;
}
    
#box {
  height: 100%;
  text-align: center;
  overflow: scroll;
}
    
#list>div {
  width: 100%;
  height: 30px;
  line-height: 30px;
}
    
#loading {
  height: 32px;
  line-height: 32px;
}

js

 //状态标记
    var loading = true;
    $(function() {
      loadData();
      
      $('#box').scroll(function() {
        var range = 40;
        var t = $('#box').scrollTop();
        var h = $(window).height();
        var scrollHeight = $('#list').height();
        var totalHeight = parseFloat(h) + parseFloat(t);
        if (scrollHeight - totalHeight < range) {
          if (loading) return;
          loading = true;
          $('#loading').show();
          loadData();
        }
      })

      function loadData() {
        var html = '';
        for (var i = 1; i < 30; i++) {
          html += '<div>' + i + '</div>';
        }
        setTimeout(function() {
          $('#loading').hide();
          $('#list').append(html);
          loading = false;
        }, 600)
      }
    })

总结

以上是我个人对滚动加载的了解。

结束语

• 天生我才必有用
• 把所有平凡的事都做好