移动端加载数据时，由于数据太多，不会一次性全部加载出来。有些会采用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
从第一行数据可以看出来，2000(content)+2*2(border)+20(margin-top)=2024才是全部内容。故var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight); 。
第二行数据，window.pageYOffset 不支持ie8；另外查询其他文档得知，document.documentElement.scrollTop 和 document.body.scrollTop 只会生效一个；window.scrollY也是一样的功能，但是兼容性比第一个还差（点此查看）。故var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;。
第三行数据：显而易见，数字小的那个才是窗口可是区域高度。故var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight,document.body.clientHeight);。
所以最后的js代码如下：
window.onscroll= function(){
//文档内容实际高度（包括超出视窗的溢出部分）
var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
//滚动条滚动距离
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
//窗口可视范围高度
var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight,document.body.clientHeight);
if(clientHeight + scrollTop >= scrollHeight){
console.log("===加载更多内容……===");
}
}
jquery的实现方式
代码如下：
<script>
$(window).on("resize scroll",function(){
var windowHeight = $(window).height();//当前窗口的高度
var scrollTop = $(window).scrollTop();//当前滚动条从上往下滚动的距离
var docHeight = $(document).height(); //当前文档的高度
console.log(scrollTop, windowHeight, docHeight);
//当 滚动条距底部的距离 + 滚动条滚动的距离 >= 文档的高度 - 窗口的高度
//换句话说：（滚动条滚动的距离 + 窗口的高度 = 文档的高度） 这个是基本的公式
if (scrollTop + windowHeight >= docHeight) {
console.log("===加载更多数据===");
}
});
</script>
测试页面代码：
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
* {
margin: 0;
padding: 0;
}
.scroll{
margin-top: 20px;
border: 2px solid #00f;
height: 2000px;
}
</style>
</head>
<body>
<div class="scroll">
<br><br><br><br><br><br><br>
sdhfiahdifashdifhid
<span id="js_con"></span>
</div>
<script>
window.onscroll= function(){
var str = '';
// str += window.scrollY+",";//ie不支持。
str += "("+document.documentElement.scrollHeight+","+document.body.scrollHeight+"),";
str += "("+window.pageYOffset+","+document.documentElement.scrollTop+","+document.body.scrollTop+"),";
str += "("+window.innerHeight+","+document.documentElement.clientHeight+","+document.body.clientHeight+"),";
document.getElementById('js_con').innerHTML = str;
console.log(str);
}
</script>
</body>
</html>
测试结果：
| 获取方式 | chrome 66 | firefox59 | edge | ie8 |
|---|---|---|---|---|
| document.documentElement.scrollHeight，document.body.scrollHeight | (2024,2004) | (2024,2004) | (2024,2004) | (2024,2004) |
| window.pageYoffset，document.documentElement.scrollTop，document.body.scrollTop | (100,100,0) | (132,132,0) | (94,94,0) | (undefined,94,0) |
| window.innerHeight，document.documentElement.clientHeight，document.body.clientHeight | (636,636,2004) | (619,619,2004) | (628,628,2004) | (undefined,624,2004) |
网友评论