JQuery Scroll Event Implementation Monitoring scroll bar pagination Simple example

  This article mainly introduces the jquery scroll event Implementation Monitoring scroll bar pagination Simple example, the use of Ajax loading, also introduced (document). Height () and $ (window). Height () the difference, Need friends can refer to the following

The Scroll event applies to the Window object, but it can also scroll through the elements of the IFRAME framework and the CSS overflow property set to scroll.   Code as follows: $ (document). Ready (function () {//I am used to writing     $ (window). Scroll (function () {       //$ (window). ScrollTop () This method is the current scroll bar scrolling distance        //$ (window). Height () Get the height of the current form     & nbsp  //$ (document). Height () get the highest level of the current document         var bot = 50; Bot is the height of the bottom distance         if (bot + $ (window). scrolltop ()) >= ($ (document). Height ()-$ (window). Height ()) {           //when the bottom base distance + scrolling height 〉= The height of the document-the height of the form;            / /We need to load data asynchronously             $.getjson ("url", {page: "2"}, function (str) {alert (str);});        }    }); });   Note: (window). The difference between height () and (document). Height ()   jquery (window). Height () represents the size of the currently visible area, and jquery (document). The height () represents the entire document and can be used in a specific situation.   Note jQuery (window) when the size of the browser window changes (such as maximizing or pulling out the windows). HeIght () changes, but jquery (document). Height () is unchanged.     Code as follows: $ (document). ScrollTop () Gets the distance of vertical scrolling   The distance from the top of the window to the top of the page at the current scrolling location $ (document). ScrollLeft () This is the distance to get the horizontal scroll bar       to get the top only need to get to the scrolltop () ==0   is the top of the   to get the bottom as long as you get ScrollTop () >=$ (document The. Height ()-$ (window). Height ()   You can know that you have scrolled to the end of the   code as follows: $ (document). Height ()  //is the height of the entire page $ (window). Height ()  //is the level of the portion of the page that is currently visible to your browser   This size will change when you zoom the browser window to be different from the document.   should be able to understand according to English.   Just do an experiment. The   code is as follows: $ (document). Scroll (function () {    $ ("#lb"). Text ($ (document). ScrollTop ());) < Span id= "lb" style= "top:100px;left:100px;position:fixed"; ></span><!--a fixed span marker to scroll for easy viewing-->