Simple Example of jQuery scroll event Implementation Monitoring scroll bar Paging

This article mainly introduces a simple example of jQuery scroll event to implement monitoring scroll bar paging. It uses ajax loading and also introduces (document ). height () and $ (window ). the difference between height () and height (). For more information, see

The scroll event applies to window objects, but can also scroll 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 ());

})

<Span id = "lb" style = "top: 100px; left: 100px; position: fixed;"> </span> <! -- A fixed span label is easy to view when scrolling -->