使用jQuery或原生js實作滑鼠滾動載入頁面新資料_jquery

相信很多人都看過瀑布流圖片佈局，那些圖片是動態載入出來的，效果很好，對伺服器的壓力相對來說也小了很多，用滑鼠操作的時候相信都看過這樣的效果：進入qq空間，向下拉動空間，到底部時，會動態載入剩餘的說說或是日誌，今天我們就來看看他們的實作思維和js控制動態載入的程式碼。

下面的程式碼主要是控制捲軸下拉時的載入事件的，無論是載入圖片還是載入記錄資料  都可以。

載入jQuery函式庫後我們可以這樣使用：  

 $(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(document).height();
    var windowHeight = $(this).height();
    if (scrollTop + windowHeight == scrollHeight) {

   //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作

//var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;
//redgiftList(page);
//$("#redgiftNextPage").attr('currentpage', page + 1);

    }
  });

解析：

判斷捲軸到底部，需要用到DOM的三個屬性值，即scrollTop、clientHeight、scrollHeight。

• scrollTop為滾動條在Y軸上的滾動距離。
• clientHeight為內容視覺區域的高度。
• scrollHeight為內容視覺區域的高度加上溢出（滾動）的距離。

從這個三個屬性的介紹就可以看出來，滾動條到底部的條件即為scrollTop clientHeight == scrollHeight。 

純js我們可以這樣做：

window.onscroll = function() { 
   var scrollTop = document.body.scrollTop; 
   var offsetHeight = document.body.offsetHeight; 
   var scrollHeight = document.body.scrollHeight; 
   if (scrollTop == scrollHeight - offsetHeight) { 
    page++; 
    loadList(page); 
   } 
  }; 
 
 
function loadList(page) { 
   page = page || 1; 
 
   if (isLoad) { 
    getJSON('/forum.php?mod=hot&page=' + page).then(function(data) { 
     if (data.code == 200) { 
      data = data.data; 
      if (data && Object.keys(data).length > 0) { 
       for (var k in data) { 
        var v = data[k]; 
        detailTemplate = detailTemplate.cloneNode(true); 
        var userInfoObj = detailTemplate.getElementsByClassName('user-info')[0]; 
        userInfoObj.getElementsByClassName('name')[0].innerText = v.author; 
        userInfoObj.getElementsByClassName('avatar')[0].src = v.avatar; 
        userInfoObj.getElementsByClassName('post-time')[0].innerHTML = v.lastpost; 
        detailTemplate.getElementsByClassName('title')[0].innerText = v.subject; 
        detailTemplate.getElementsByClassName('desc')[0].innerText = v.subject; 
        var extInfoObj = detailTemplate.getElementsByClassName('ext-info')[0]; 
        extInfoObj.getElementsByClassName('from')[0].innerText = v.fname; 
        extInfoObj.getElementsByClassName('view-time')[0].innerText = v.views; 
        postListObj.appendChild(detailTemplate); 
       } 
      } else { 
       isLoad = false; 
      } 
     } else { 
      isLoad = false; 
     } 
    }, function(status) { 
     console.log('Something went wrong, status is ' + status); 
    }); 
   } 
  }