JS開發(fā)之上拉加載更多

需求說明:當(dāng)用戶瀏覽到頁面底部時(shí)候,自動(dòng)加載下一頁的內(nèi)容
實(shí)現(xiàn)原理:JS獲取當(dāng)前滾動(dòng)條高度、滾動(dòng)條長(zhǎng)度以及頁面總長(zhǎng)度,當(dāng)滾動(dòng)條高度加上當(dāng)前滾動(dòng)條長(zhǎng)度等于頁面總長(zhǎng)度的時(shí)候,頁面到達(dá)底部,此時(shí)可以觸發(fā)ajax加載下一頁內(nèi)容。代碼如下

<script>

    //獲取滾動(dòng)條當(dāng)前的位置 
    function getScrollTop() { 
    var scrollTop = 0; 
    if (document.documentElement && document.documentElement.scrollTop) { 
    scrollTop = document.documentElement.scrollTop; 
    } 
    else if (document.body) { 
    scrollTop = document.body.scrollTop; 
    } 
    return scrollTop; 
    } 

    //獲取當(dāng)前可視范圍的高度 
    function getClientHeight() { 
    var clientHeight = 0; 
    if (document.body.clientHeight && document.documentElement.clientHeight) { 
    clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); 
    } 
    else { 
    clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 
    } 
    return clientHeight; 
    } 

    //獲取文檔完整的高度 
    function getScrollHeight() { 
    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
    } 
        window.onscroll = function () { 
        if (getScrollTop() + getClientHeight() == getScrollHeight()) { 
        //ajax從這里開始
      </script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,110評(píng)論 1 92
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,881評(píng)論 25 709
  • 不斷轉(zhuǎn)換的風(fēng)景 伴隨著喧囂 消失在昨夜的淡淡星光里。 我若看清你的輪廓 至少留下一個(gè)擁抱 化作春泥。 但愿三月的呢...
    夫子閑云孫寧富閱讀 298評(píng)論 0 2
  • 我母親本是世家小姐,卻流落那煙花之地賣藝,不想對(duì)那年輕的君王一見傾心,一夜風(fēng)流,母親懷上了我,可那薄情的帝王怎么可...
    妝未然閱讀 398評(píng)論 1 2
  • 這部書寫于1940年,被譽(yù)為經(jīng)典,由商務(wù)印書館出版。作者將閱讀分為四個(gè)層次:基礎(chǔ)閱讀、略讀、分析閱讀、主題閱讀。本...
    李開航閱讀 409評(píng)論 1 0

友情鏈接更多精彩內(nèi)容