JQuery scroll event implements the monitoring scroll bar paging example

  • 2020-03-30 02:30:31
  • OfStack

The scroll event applies to the window object, but it can also scroll elements set to scroll by the iframe frame and CSS overflow property.


$(document).ready(function () { //I'm used to writing it this way
    $(window).scroll(function () {
        //$(window).scrolltop () this method is the distance the current scroll bar scrolls
        //$(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 of the bottom distance
        if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
           //When base distance at the bottom + height of scrolling > = height of the document - height of the form;
            //We need to load the data asynchronously
            $.getJSON("url", { page: "2" }, function (str) { alert(str); });
        }
    });
});

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

JQuery (window).height() represents the current size of the visible area, while jQuery(document).height() represents the height of the entire document, which can be used as the case may be.

Note that jQuery(window).height() changes as the browser window size changes, but jQuery(document).height() remains the same.


$(document).scrollTop()  Gets the distance of the vertical scroll    The distance between the top of the window and the top of the entire page where you are currently scrolling 
$(document).scrollLeft()  This is the distance to get the horizontal scroll bar 

To get the top, just get scrollTop()==0 & PI; That's the top

To get the bottom just get scrollTop()> = $(document), height () - $(window), height ()   I know I'm at the bottom


$(document).height()  //Is to get the height of the entire page
$(window).height()  //Gets the height of the part of the page that is currently visible to your browser. This size changes as you scale the size of the browser window unlike the document & PI; According to English should also understand it

Just do an experiment yourself

$(document).scroll(function(){
    $("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!-- A fixed span tag   Easy to view when scrolling -->


Related articles: