Use jQuery or native js to implement mouse scrolling to load new data on the page

Use jQuery or native js to implement mouse scrolling to load new data on the page_jquery

WBOY

Release： 2016-05-16 15:11:57

Original

2001 people have browsed it

I believe many people have seen the waterfall flow image layout. Those images are dynamically loaded and the effect is very good. The pressure on the server is relatively small. I believe you have seen such an effect when operating with the mouse. : Enter the qq space, pull down the space, and when it reaches the bottom, the remaining comments or logs will be dynamically loaded. Today we will take a look at their implementation ideas and the code for controlling dynamic loading using js.

The following code mainly controls the loading event when the scroll bar is pulled down, whether it is loading pictures or loading record data.

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) {

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

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

    }
  });

Copy after login

Analysis:

To determine whether the scroll bar reaches the bottom, you need to use three attribute values of the DOM, namely scrollTop, clientHeight, and scrollHeight.

scrollTop is the scrolling distance of the scroll bar on the Y axis.
clientHeight is the height of the content visible area.
ScrollHeight is the height of the content’s visible area plus the overflow (scrolling) distance.

As can be seen from the introduction of these three attributes, the condition for the scroll bar to reach the bottom is scrollTop + clientHeight == scrollHeight.

In 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&#63;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); 
    }); 
   } 
  }

Copy after login