移動端加載數據時，由于數據太多，不會一次性全部加載出來。有些會采用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可以獲取;
下面我先附上我的大致測試結果圖（頁面代碼和測試表格數據最后附上）
從第一行數據可以看出來，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) |
