JQuery Scroll Event Implementation Monitoring scroll bar pagination Sample _jquery

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.

Copy Code code as follows:

$ (document). Ready (function () {//I'm used to writing this.
$ (window). Scroll (function () {
$ (window). ScrollTop () This method is the current scroll bar scroll distance
$ (window). Height () Gets the height of the current form
$ (document). Height () Gets the current document Heights
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 the data asynchronously.
$.getjson ("url", {page: "2"}, function (str) {alert (str);});
}
});
});

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

The jquery (window). Height () represents the size of the currently visible area, and jquery (document). Height () represents the height of the entire document, and is used visually.

Note the jquery (window) When the browser window size changes (such as maximizing or pulling out the windows). Height () changes, but jquery (document). Height () is unchanged.

Copy Code code as follows:

$ (document). ScrollTop () Gets the distance from the vertical scrolling, which is the top of the window to the top of the page, where the current scroll is.
$ (document). ScrollLeft () This is the distance to get the horizontal scroll bar

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

To get the bottom, just get scrolltop () >=$ (document). Height ()-$ (window). Height () to know that it has been scrolled to the end

Copy Code code as follows:

$ (document). Height ()//is to get the height of the entire page
$ (window). Height ()//is the elevation of the portion of the page that you are currently seeing as your browser. This size will change when you zoom in on the browser window size it's not the same as the document, according to English.

Do an experiment on your own, you know.

Copy Code code 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-->