頁面上拉分頁效果,滾動觸發(fā)事件

1.整個頁面分頁拉數(shù)據(jù)

window.addEventListener('scroll', this.handleScroll);
function handleScroll() {
    //判斷滾動到底部
     if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
        //觸發(fā)事件
        getPeopleList();
    }
}

2.單個列表分頁拉數(shù)據(jù)

  • 獲取窗口高度
    let winHeight = document.documentElement.clientHeight
function scrollFunc(){
    $("#peopleList").scroll(function(){
        var $this =$(this),
            viewH =$(this).height(),//可見高度
            contentH =$(this).get(0).scrollHeight,//內(nèi)容高度
            scrollTop =$(this).scrollTop();//滾動高度
        if(contentH = viewH + scrollTop) { //當(dāng)滾動到底部時,
            getPeopleList();
        }
        if(contentH - viewH - scrollTop <= 100) { //當(dāng)滾動到距離底部100px時,

        }
        if(scrollTop/(contentH -viewH) >= 0.95){ //當(dāng)滾動到距離底部5%時
            // 這里加載數(shù)據(jù)..
            getPeopleList();
        }
    });
}
scrollFunc();
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

  • 一、JS前言 (1)認(rèn)識JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu)),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,933評論 0 8
  • ??ECMAScript 是 JavaScript 的核心,但如果要在 Web 中使用 JavaScript,那么...
    霜天曉閱讀 954評論 0 0
  • 事件源對象 event.srcElement.tagName event.srcElement.type 捕獲釋放...
    孤魂草閱讀 1,007評論 0 0
  • DOM 變化 如何確認(rèn)瀏覽器是否支持 DOM 2 和 DOM 3 新增的模塊:var supportsDOM2Co...
    云之外閱讀 525評論 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,826評論 1 45

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