jQuery 스크롤 이벤트 구현 모니터링 스크롤 막대 페이징 예제

스크롤 이벤트는 창 개체에 적용되지만 CSS 오버플로 속성이 스크롤로 설정된 iframe 요소를 스크롤할 수도 있습니다.

$(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); });
        }
    });
});

(window).height()와 (document).height()의 차이점에 유의하세요.

jQuery(window).height()는 현재 보이는 영역의 크기를 나타냅니다. .jQuery(document).height()는 문서 전체의 높이를 나타내며 특정 상황에 따라 사용할 수 있습니다.

브라우저 창 크기가 변경되는 경우(예: 창을 최대화하거나 확대한 후) jQuery(window).height()는 이에 따라 변경되지만 jQuery(document).height()는 변경되지 않습니다.

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

최상위를 얻으려면 최상위인 scrollTop()==0만 얻으면 됩니다.

최하위를 얻으려면 scrollTop()만 얻으면 됩니다. >=$(document).height()-$(window).height() 아래로 스크롤한 것을 알 수 있습니다

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

실험해 보면 알 수 있습니다

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

추가 jQuery 스크롤 이벤트 모니터링 스크롤 막대 페이지 매김 예제 구현에 대한 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!