手機端頁面滑動到底部載入資訊

標籤：

//滾動式載入
function scroll_load(){
    var scrollBottom; //網頁本文全文高-捲軸距離頂部的高度
    
    $(document).scroll(function(){//滾動事件
          scrollBottom = document.body.scrollHeight - document.body.scrollTop;
          if(scrollBottom == document.body.clientHeight|| scrollBottom <= (document.body.clientHeight+10)){ 

//scrollBottom是否等於網頁可見地區高，如果相等則執行下面代碼

              if(pageCount == (currentPage+1)){//判斷總頁數是否等於當前頁碼+1，如果相等則執行下面代碼
                      $(".click-load").hide();
                      return;
                  }
              
                currentPage++;//當前頁碼加1
                showList(currentPage,pageSize);     //訪問的伺服器的分頁介面，請求資料          
            }
    });
}

 

順便寫一下常用的高度：

Javascript:

alert(document.body.clientWidth);        //網頁可見地區寬(body)

alert(document.body.clientHeight);       //網頁可見地區高(body)

alert(document.body.offsetWidth);       //網頁可見地區寬(body)，包括border、margin等

alert(document.body.offsetHeight);      //網頁可見地區寬(body)，包括border、margin等

alert(document.body.scrollWidth);        //網頁本文全文寬，包括有捲軸時的未見地區

alert(document.body.scrollHeight);       //網頁本文全文高，包括有捲軸時的未見地區

alert(document.body.scrollTop);           //網頁被捲去的Top(捲軸)

alert(document.body.scrollLeft);           //網頁被捲去的Left(捲軸)

alert(window.screenTop);                     //瀏覽器距離Top

alert(window.screenLeft);                     //瀏覽器距離Left

alert(window.screen.height);                //螢幕解析度的高

alert(window.screen.width);                 //螢幕解析度的寬

alert(window.screen.availHeight);          //螢幕可用工作區的高

alert(window.screen.availWidth);           //螢幕可用工作區的寬

 

Jquery

alert($(window).height());                           //瀏覽器當前視窗可視地區高度

alert($(document).height());                        //瀏覽器當前視窗文檔的高度

alert($(document.body).height());                //瀏覽器當前視窗文檔body的高度

alert($(document.body).outerHeight(true));  //瀏覽器當前視窗文檔body的總高度 包括border padding margin

alert($(window).width());                            //瀏覽器當前視窗可視地區寬度

alert($(document).width());                        //瀏覽器當前視窗文檔對象寬度

alert($(document.body).width());                //瀏覽器當前視窗文檔body的寬度

alert($(document.body).outerWidth(true));  //瀏覽器當前視窗文檔body的總寬度 包括border padding margin

手機端頁面滑動到底部載入資訊