jQuery scroll event implementation monitoring scroll bar paging example

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

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

$(document).scrollTop() 获取垂直滚动的距离  即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() 这是获取水平滚动条的距离

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() You can know that you have scrolled to the bottom

$(document).height()  //是获取整个页面的高度
$(window).height()  //是获取当前 也就是你浏览器所能看到的页面的那部分的高度  这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的  根据英文应该也能理解吧

You will know by doing an experiment yourself

$(document).scroll(function(){
    $("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记 滚动时方便查看-->

More jQuery scroll event implementation monitoring scroll bar paging examples For related articles, please pay attention to the PHP Chinese website!