JQuery Scroll Event Implementation Monitoring scroll bar pagination Example

This article mainly introduces the jquery scroll event Implementation Monitoring scroll bar Paging Simple example, using AJAX to load, and also introduced (document). Height () and the difference between the height (), which is required for friends to refer to below.

The Scroll event applies to the Window object, but can also scroll the iframe frame with the CSS overflow property set to the scroll element.

1$ (document). Ready (function() {//I'm used to writing this.2$ (window). Scroll (function () {3         //$ (window). ScrollTop () This method is the distance that the current scroll bar scrolls4         //A $ (window). Height () Gets the height of the current form5         //$ (document). Height () Gets the altitude of the current document6         varbot = 50;//bot is the height of the bottom distance7         if(bot + $ (window). scrolltop ()) >= ($ (document). Height ()-$ (window). Height ())) {8            //When the bottom base distance + scrolling height 〉= The height of the document-the height of the form;9             //we need to load the data asynchronously.Ten$.getjson ("url", {page: "2"},function(str) {alert (str);}); One         } A     }); -});

Note: (window). Height () and (document) the difference between height ()

jquery (window). Height () represents the size of the currently visible area, while jquery (document). Height () represents the height of the entire document and is used in a specific case.

Note jquery (window) when the size of the browser window changes (such as when you maximize or pull large windows). Height () is changed, but jquery (document). Height () is constant.

// Gets the distance that the vertical scroll is from the   top of the window to the top of the page where it is currently scrolled // This is the distance to get the horizontal scroll bar

To get the top only need to get to scrolltop () ==0 is the top of the

To get the bottom as long as you get ScrollTop () >=$ (document). Height ()-$ (window). Height () You know you're rolling to the end.

$ (document). Height ()  // is the full page of the High (window). Height ()  // is to get the current That is, the height of the portion of the page you can see in your browser.  This size changes when you zoom the browser window   to be different from document. It should be understood as well.

I'll find out by doing an experiment.

$ (document). Scroll (function() {    $ ("#lb"). Text ($ (document). ScrollTop ());}) <span id= "lb" style= "top:100px;left:100px;position:fixed;" ></span><!--a fixed span tag for easy viewing when scrolling

Source: http://www.jb51.net/article/48714.htm

JQuery Scroll Event Implementation Monitoring scroll bar pagination example (GO)