Use jQuery or native js to implement the mouse scroll loading page new data

Believes that many people have seen the waterfall flow layout images, those images are dynamic load, the effect is very good, the pressure on the server is relatively small, use the mouse to operate believe all seen such effect: when enter qq space, space, pulled down to the bottom, can dynamically loading the rest of the talk about or log, today we take a look at their mentality and js control dynamic load code.

The following code is mainly to control the scroll bar drop down when loading events, whether it is loading images or loading record data can be.

After loading the jQuery library we can use it like this:

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

   // Here is the event that fires at the bottom of the scroll bar, where you write the data to load, or where you pull the scroll bar 

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

    }
  });

Resolution:

To determine the bottom of the scroll bar, you need three values of DOM: scrollTop, clientHeight, scrollHeight.

scrollTop is the rolling distance of the scroll bar on the Y axis. clientHeight is the height of the content viewable area. scrollHeight adds the overflow (scrolling) distance to the height of the content visible area.

As can be seen from the description of the three properties, the condition at the bottom of the scroll bar is scrollTop + clientHeight == scrollHeight

For pure js we can do this:

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); 
    }); 
   } 
  }