移动端加载数据时,由于数据太多,不会一次性全部加载出来。有些会采用pc端那样用分页码的形式,但是更多的确实滑动滚动条到内容最后,加载更多内容出来。一般引入了三方的前端框架和插件,基本都会有此功能。偶尔会需要采用原生js实现,故而此处就介绍下原生js的实现方式。另外附上jquery的实现方式。

原生js实现思路
需要三个高度:
scrollHeight(文档内容实际高度,包括超出视窗的溢出部分)、
scrollTop(滚动条滚动距离)、
clientHeight(窗口可视范围高度)。

当 clientHeight + scrollTop >= scrollHeight 时,表示已经抵达内容的底部了,可以加载更多内容。

scrollHeight:可以通过 document.documentElement.scrollHeight 、document.body.scrollHeight 获取;
clientHeight:可以通过window.innerHeight 、 document.documentElement.clientHeight 获取;
scrollTop:可以通过window.pageYOffset 、 document.documentElement.scrollTop 获取;

scrollHeight,clientHeight,scrollTop

作者:郭先生_515
链接:https://www.jianshu.com/p/c59b2ccc963c
来源:简书

相关文章:

  • 2021-11-21
  • 2021-12-01
  • 2022-01-14
  • 2021-04-07
猜你喜欢
  • 2022-12-23
  • 2022-02-19
  • 2021-11-29
  • 2021-09-29
  • 2021-08-15
相关资源
相似解决方案