모니터링 스크롤바 페이징 예제를 구현하기 위한 jQuery 스크롤 이벤트에 대한 자세한 설명

이 글에서는 주로 ajax 로딩을 사용하여 스크롤 막대 페이징을 모니터링하는 간단한 예의 jQueryscrollevent구현을 소개하고 (document).height()와 $(window).height( ), 도움이 필요한 친구는

window 객체

에 적용되는 scroll 이벤트를 참조할 수 있지만, iframe 프레임과 CSS overflow 속성을 스크롤로 설정하여 요소를 스크롤할 수도 있습니다.

코드는 다음과 같습니다.

$(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).scroll( function(){
  $("#lb").text($(document).scrollTop());
})
3cbe03b5eb3441517b460bd1f77e53e754bdf357c58b8a65c66d7c19c8e4d114d25d35c32dca7894be0f8fcc81a04279

위 내용은 모니터링 스크롤바 페이징 예제를 구현하기 위한 jQuery 스크롤 이벤트에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!