无限滚动加载数据

滚动到底部加载数据,挺常用的一个技术。

今天就来说说这个技术怎么实现。

首先,先布局…………………….(此处省略 10 秒钟)

好了,布局完成了………………..

想一想,确定滚动条滚动到底部,js 并没有获取滚动条距离底部多少距离的方法,那我们就只有自己去计算了,这里有一个公式:

内容高度 = 滚动距离 + 可视区高(你所看到的页面最大高度)

还有获取的方式:

内容高度:document.body.scrollHeight

滚动距离:document.body.scrollTop || document.documentElement.scrollTop

可视区高:document.documentElement.clientHeight

我们在滚动条滚动的时候去计算,直接上代码:

<script type="text/javascript">
 //内容高度
 var docHeight = 0;
 //滚动条高度
 var scrollTop = 0;
 //可视去高度
 var clientHeight = 0;
 window.onscroll = function(){
 docHeight = document.body.scrollHeight;
 scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 clientHeight = document.documentElement.clientHeight;
 //公式:内容高度 = 滚动距离 + 可视区高(你所看到的页面最大高度)
 if( clientHeight + scrollTop == docHeight ){
 alert("滚动到底部了!");
 }
 }
 </script>

就这样子。

有时候我们不希望完全滚动到底部才执行,比如距离底部还有 30px 的时候,那我们可以这样:

if( clientHeight + scrollTop + 30 >= docHeight ){
 alert("滚动到底部了!");
 }

很简单。然后在 if 里面写业务代码,比如给页面添加一些内容。

if( clientHeight + scrollTop + 30 >= docHeight ){
 var p = document.createElement("p");
 var ps = "";
 for (var i = 0; i < 10; i++) {
 ps = p.cloneNode();//克隆节点,比重新创建节点的性能稍稍好一丢丢
 ps.innerText = i;
 box.appendChild(ps);
 }
 }

发现了个问题,就是有时候会重复添加两次,这里应该说是,重复触发了 2 次滚动条事件。解决办法,加一个锁:

var flag = true;//锁
//在这里先判断锁,可以起到一丢丢的优化作用,如果不为真就不用计算后面的了
 if(flag && clientHeight + scrollTop + 30 >= docHeight ){
 flag = !flag;//取反,是 true = false    是 false = true
 var p = document.createElement("p");
 var ps = "";
 console.log(1);
 for (var i = 0; i < 10; i++) {
 ps = p.cloneNode();//克隆节点,比重新创建节点的性能稍稍好一丢丢
 ps.innerText = i;
 box.appendChild(ps);
 }
 flag = !flag;
 }

这样子,这个问题一般在 ajax 加载的时候问题较多,希望大家多多注意。

相关链接

无限滚动加载
a'ゞ『完美』版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明无限滚动加载数据
喜欢 (19)
[]
分享 (0)
a'ゞ『完美』
关于作者:
一个前端小白菜
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址