移动端加载数据时,由于数据太多,不会一次性全部加载出来。有些会采用pc端那样用分页码的形式,但是更多的确实滑动滚动条到内容最后,加载更多内容出来。一般引入了三方的前端框架和插件,基本都会有此功能。偶尔会需要采用原生js实现,故而此处就介绍下原生js的实现方式。另外附上jquery的实现方式。
原生js实现思路
需要三个高度:scrollHeight(文档内容实际高度,包括超出视窗的溢出部分)、scrollTop(滚动条滚动距离)、clientHeight(窗口可视范围高度)。当 clientHeight + scrollTop >= scrollHeight 时,表示已经抵达内容的底部了,可以加载更多内容。
scrollHeight:通过 document.documentElement.scrollHeight 、document.body.scrollHeight 可以获取;
scrollTop:通过window.pageYOffset 、 document.documentElement.scrollTop 、 document.body.scrollTop 可以获取;(window.scrollY也可以,只是ie根本不支持。点此查看)
clientHeight:通过window.innerHeight 、 document.documentElement.clientHeight 、 document.body.clientHeight 可以获取;
下面我先附上我的大致测试结果图(页面代码和测试表格数据最后附上)
123.png
从第一行数据可以