> 웹 프론트엔드 > JS 튜토리얼 > jQuery 스크롤 이벤트 구현 모니터링 스크롤 막대 페이징 예제

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

高洛峰
풀어 주다: 2017-01-11 09:44:51
원래의
1331명이 탐색했습니다.

스크롤 이벤트는 창 개체에 적용되지만 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 중국어 웹사이트에 주목하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿