[JS front-end development] Js/jquery control page dynamic loading data sliding scrollbar Auto-load Event

page Scrolling dynamically loading data, page drop-down automatically loading content

I believe 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

Have a mobile phone believe have seen this effect: into the QQ space, down to pull the space, to the bottom, will dynamically load the rest of the said or log

Today we'll take a look at their implementation ideas and JS control dynamically loaded code

The following code mainly controls the Load event when the scrollbar is pulled down.

In the code below, write your action, whether it is loading the picture or loading the record data can be

Don't forget to refer to the JQuery class library
[JavaScript] Plain text view copy code

    $ (window). Scroll (function () {        var scrolltop = $ (this). ScrollTop ();        var scrollheight = $ (document). Height ();        var WindowHeight = $ (this). Height ();        if (scrolltop + windowheight = = scrollheight) {      //Here is the event that is triggered by the scrollbar to the bottom, where the data to be loaded is written, or the action to pull the scroll bar//var page = number ($ ("#" Redgiftnextpage "). attr (' currentpage ') + 1;//redgiftlist (page);//$ (" #redgiftNextPage "). attr (' currentpage ', page + 1 );        }    });

Analytical:

Judging the scroll bar to the bottom, you need to use the DOM's three attribute values, namely ScrollTop, ClientHeight, ScrollHeight.

ScrollTop is the scroll distance of the scrollbar on the y-axis.

ClientHeight is the height of the viewable area of the content.

ScrollHeight the height of the viewable area of the content plus the distance to overflow (scroll).

from the introduction of this three attributes can be seen, scroll bar to the bottom of the condition is scrolltop + clientheight = = ScrollHeight. (compatible with different browsers).

[JS front-end development] Js/jquery control page dynamic loading data sliding scrollbar Auto-load Event