모니터링 스크롤 막대 페이징을 구현하는 jQuery 스크롤 이벤트 example

모니터링 스크롤 막대 페이징을 구현하는 jQuery 스크롤 이벤트 example_jquery

WBOY

풀어 주다： 2016-05-16 16:53:24

원래의

1070명이 탐색했습니다.

스크롤 이벤트는 창 개체에 적용되지만 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())) {
                                         ~                키 - 
                                                                                                                             ; });
 }
 });
});

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