jQuery scroll event to implement monitoring scroll bar paging example

jQuery scroll event to implement monitoring scroll bar paging example_jquery

WBOY

Release： 2016-05-16 16:53:24

Original

1070 people have browsed it

The scroll event applies to window objects, but can also scroll iframe elements with the CSS overflow property set to scroll.

Copy code The code is as follows:

$(document).ready(function () { / / I am used to writing like this 
 $(window).scroll(function () {
 //$(window).scrollTop() This method is the current scroll bar scrolling distance 
 //$(window ).height() Gets the height of the current form 
 //$(document).height() Gets the height of the current document 
 var bot = 50; //bot is the height from the bottom 
 if ( (bot $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
                                                                                                                                                                                                          The height - the height of the form; 
                                                                                                                                                   ; });
 }
 });
});

Note the difference between: (window).height() and (document).height()

jQuery(window).height() represents the size of the currently visible area, while jQuery(document).height() represents the height of the entire document, which can be used depending on the specific situation.

Note that when the browser window size changes (such as after maximizing or enlarging the window) jQuery(window).height() changes accordingly, but jQuery(document).height() remains unchanged.

Copy code The code is as follows:

$(document).scrollTop() Gets the distance of vertical scrolling, which is the distance from the top of the window where you are currently scrolling to the top of the entire page

$(document).scrollLeft() This is the distance of getting the horizontal scroll bar

To get the top, you only need to get when scrollTop()==0, it is the top

To get the bottom, just get scrollTop()>=$(document).height()-$(window).height() Then you will know that you have scrolled to the bottom

Copy the code The code is as follows:

$(document).height() //Get the height of the entire page
$(window ).height() //It is to get the current height of the part of the page that your browser can see. This size will change when you resize the browser window. It is different from the document. It should be understandable in English. Let's 

Just do an experiment and you'll find out

Copy the code The code is as follows:

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