Example of monitoring scroll bar pagination using jQueryscroll events _ jquery

This article mainly introduces a simple example of using jQueryscroll events to implement monitoring of scroll bar paging, ajax loading, and document ). height () and $ (window ). the difference between height () and scroll. You can refer to the scroll event applicable to window objects, but you can also set the iframe framework and CSS overflow attributes to scroll elements.

The Code is as follows:

$ (Document). ready (function () {// I am used to writing this
$ (Window). scroll (function (){
// $ (Window). scrollTop () This method is the scroll distance of the current scroll bar.
// $ (Window). height () Get the height of the current form
// $ (Document). height () Get the height of the current document
Var bot = 50; // The height of the bottom.
If (bot + $ (window). scrollTop () >=( $ (document). height ()-$ (window). height ())){
// When the basic distance at the bottom + the scroll 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). height () and (document). height ()

JQuery (window). height () indicates the size of the currently visible area, while jQuery (document). height () indicates the height of the entire document.

Note that jQuery (window). height () changes as the browser window size changes (for example, after the window is maximized or enlarged), but jQuery (document). height () does not change.

The Code is as follows:

$ (Document). scrollTop () gets the vertical scroll distance, that is, the distance from the top of the current tumble window to the top of the entire page
$ (Document). scrollLeft () This is the distance to obtain the horizontal scroll bar.

To get the top, you only need to get scrollTop () = 0, which is the top.

To get the bottom, you only need to get scrollTop () >=$ (document). height ()-$ (window). height () to know whether the scroll ends.

The Code is as follows:

$ (Document). height () // gets the height of the entire page
$ (Window ). height () // obtain the height of the page that can be viewed by your browser. The size of the page varies with the document size when you zoom in the browser window.

Make an experiment by yourself.

The Code is as follows:

$ (Document). scroll (function (){
$ ("# Lb"). text ($ (document). scrollTop ());
})