Detailed explanation of jQuery scroll event to implement monitoring scroll bar paging example

This article mainly introduces the jQuery scroll event to implement a simple example of monitoring scroll bar paging, using ajax loading, and also introduces (document).height The difference between () and $(window).height(), friends in need can refer to the following

scroll event is applicable to window object, but it can also scroll iframe frame and CSS Elements whose overflow attribute is set to scroll.

The code is as follows:

$(document).ready(function () { //本人习惯这样写了
    $(window).scroll(function () {
        //$(window).scrollTop()这个方法是当前滚动条滚动的距离
        //$(window).height()获取当前窗体的高度
        //$(document).height()获取当前文档的高度
        var bot = 50; //bot是底部距离的高度
        if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
           //当底部基本距离+滚动的高度〉=文档的高度-窗体的高度时；
            //我们需要去异步加载数据了
            $.getJSON("url", { page: "2" }, function (str) { alert(str); });
        }
    });
});

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 the maximum After resizing or enlarging the window) jQuery(window).height() changes accordingly, but jQuery(document).height() remains unchanged.

The code is as follows:

$(document).scrollTop() Gets the vertical scrolling distance, that 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 to get 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() You can know that you have scrolled to the bottom

The code is as follows:

$ (document).height() //Gets the height of the entire page
$(window).height() //Gets the height of the current part of the page that your browser can see. This size is When you resize the browser window, the change will be different from the document. You should be able to understand it based on English.

You will know by doing an experiment

The code is as follows:

$(document).scroll(function(){
$("#lb").text($(document).scrollTop());
})
position:fixed;">

The above is the detailed content of Detailed explanation of jQuery scroll event to implement monitoring scroll bar paging example. For more information, please follow other related articles on the PHP Chinese website!