js and jquery Control Page Dynamic Loading Data Sliding Scroll Bar Automatic Loading Event Method

Page scrolling dynamically loads data, and page drop-down automatically loads content

Believe that many people have seen waterfall flow picture layout, those pictures are dynamically loaded out, the effect is very good, the pressure on the server is relatively small a lot

I believe those who have mobile phones have seen such an effect: enter the qq space, pull down the space, and when they reach the bottom, they will dynamically load the remaining talk or log

Today, we will look at their implementation ideas and the code of js to control dynamic loading

The following code mainly controls the load event when the scroll bar drops down

In the following code, write your operation, whether it is loading pictures or loading record data can be

Don't forget to reference the jquery class library

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

    　　 // Here is the event triggered when the scroll bar reaches the bottom, where the data to be loaded is written, or the operation of pulling the scroll bar 
 　　 
  　　  　　  　　  //var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;
  　　  　　  　　  //redgiftList(page);
  　　  　　  　　  //$("#redgiftNextPage").attr('currentpage', page + 1);

    }
  });

Analysis:

To judge the scroll bar to the bottom, three attribute values of DOM are needed, namely scrollTop, clientHeight and scrollHeight.

scrollTop is the scroll distance of the scroll bar on the Y axis.

clientHeight is the height of the visual area of the content.

scrollHeight is the height of the visual area of the content plus the overflow (scrolling) distance.

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