滾動到底部加載更多

移動端加載數據時,由于數據太多,不會一次性全部加載出來。有些會采用pc端那樣用分頁碼的形式,但是更多的確實滑動滾動條到內容最后,加載更多內容出來。一般引入了三方的前端框架和插件,基本都會有此功能。偶爾會需要采用原生js實現,故而此處就介紹下原生js的實現方式。另外附上jquery的實現方式。

原生js實現思路

需要三個高度:scrollHeight(文檔內容實際高度,包括超出視窗的溢出部分)、scrollTop(滾動條滾動距離)、clientHeight(窗口可視范圍高度)。當 clientHeight + scrollTop >= scrollHeight 時,表示已經抵達內容的底部了,可以加載更多內容。

  • scrollHeight:通過 document.documentElement.scrollHeightdocument.body.scrollHeight 可以獲取;
  • scrollTop:通過window.pageYOffsetdocument.documentElement.scrollTopdocument.body.scrollTop 可以獲取;(window.scrollY也可以,只是ie根本不支持。點此查看
  • clientHeight:通過window.innerHeightdocument.documentElement.clientHeightdocument.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.scrollTopdocument.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)

參考:

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Window和document對象的區別 window對象window對象表示瀏覽器中打開的窗口window對象是...
    FConfidence閱讀 2,238評論 0 5
  • 今天玩 antd-mobile 碰到一個滾動條的問題:在 Tab 組件中使用多個 ListView ,當操作第一個...
    BertFu閱讀 30,599評論 7 9
  • 一、JS前言 (1)認識JS 也許你已經了解HTML標記(也稱為結構),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,790評論 0 8
  • 滾動到底部更新數據是個很常見的需求,也是網站優化的一部分。 頁面效果 第一次滾動到底部新加載數據 再滾動 源代碼
    webCoder閱讀 1,322評論 8 7
  • 一、水平滾動條 和 垂直滾動條 1.1 核心技術點1)求滾動條的長度? 2)拖動滾動條,求內容要走多少?滾動條的長...
    碼農的世界你不懂閱讀 399評論 0 0