Js实现滚动加载原理

Posted Judicious

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Js实现滚动加载原理相关的知识,希望对你有一定的参考价值。

原理:就是监听页面滚动事件,分析clientHeight、scrollTop、scrollHeight三者的属性关系。

window.addEventListener(‘scroll‘, function() {
  const clientHeight = document.documentElement.clientHeight;
  const scrollTop = document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight;
  if (clientHeight + scrollTop >= scrollHeight) {
    // 检测到滚动至页面底部,进行后续操作
    // ...
  }
}, false);

 


以上是关于Js实现滚动加载原理的主要内容,如果未能解决你的问题,请参考以下文章

滚动加载图片(懒加载)实现原理

js 实现无限加载分页(适合移动端)

js滚动事件实现滚动触底加载

滚动加载图片(懒加载)实现原理

js实现瀑布流加载图片效果

ember.js 无限滚动(延迟加载)