- 사이트에서 스크롤이 문서 끝까지 내려가면 자동으로 포스트를 추가하여 스크롤을 늘리는 이벤트(무한스크롤)
우선, 사용자가 마우스 스크롤을 움직으면 무조건 Scroll() 이벤트가 발생한다.
무한 스크롤을 만들려면 화면 끝까지 스크롤이 도달했다는 사실을 인지하여야 한다.
Document 객체의 height 속성은 문서 전체의 높이를 의미한다.
스크롤이 페이지에서 끝까지 내려가면, window 객체의 ScrollTop 속성과 height 속성 값을 합한 것이
Document 객체의 높이와 같아진다. 이때 포스트를 추가하는 방식이다.
예 사이트) http://mixsh.com
ex>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
$(window).scroll(function () {
var scrollHeight = $(window).scrollTop() + $(window).height();
var documentHeight = $(window).height();
if (scrollHeight >= documentHeight) {
for (var i = 0; i < 10; i++) {
$('body').append('<h1>Scroll Add</h1>'); // 임의로 그냥 텍스트 추가
}
}
});
});
</script>
우선 페이지에 스크롤 표시를 위해 <body> 태그에 데이타를 입력해서 스크롤을 이용할수 있도록 세팅을 한 후에 실험해야 한다.
'공부 > JQuery' 카테고리의 다른 글
| JQuery_[위치기반 필터 선택자] (0) | 2015.01.29 |
|---|---|
| JQuery_[ $.param() / serialize() ] (0) | 2014.08.26 |
| JQuery_[ $.extend() ] (0) | 2014.08.25 |
| JQuery_[ jQuery 속성선택자 ] (0) | 2014.08.22 |
| JQuery_[ li 리스트 항목 순서 변경하기 ] (0) | 2014.04.16 |