Example of monitoring scroll bar pagination using jQueryscroll events _ jquery

Source: Internet
Author: User
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 ());
})

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.