移動端加載數據時,由于數據太多,不會一次性全部加載出來。有些會采用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) |