스크롤 이벤트를 통한 무한 스크롤을 구현해보기
윈도우 이벤트는 window 객체에 의해서 구현이 됩니다. 이 객체의 scrollTop값과
height 값을 더한 값이 실제 문서의 높이를 의미하는 document 객체의 height 속성
값이 같으면 즉 스크롤이 Rx까지 도달했다는 의미입니다.
이를 사용하여 무한 스크롤을 구현해보았습니다.
소스
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function (event){
$(window).scroll(function(){
var scrollHeight = $(window).scrollTop() + $(window).height();
var documentHeight = $(document).height();
//스크롤이 맨아래로 갔는지 아닌지 확인하는 if문
if(scrollHeight == documentHeight){
for(var i = 0; i < 10; i++){
$('<h1>Infinity Scroll11</h1>').appendTo('body');
}
}
});
});
//테스트를 위해 내부에 공간을 채워서 스크롤을 임의로 만듬
$(document).ready(function(){
for(var i = 0; i < 20; i++){
$('<h1>infinity scroll</h1>').appendTo('body');
}
});
</script>
</head>
<body>
<div>
<p>지금 내 생각을</p>
<h1>150</h1>
<textarea cols="70" rows="5"></textarea>
</div>
</body>
</html>
실행 화면
스크롤을 내리면 계속 Infinity Scroll11이라는 글자가 생성되는 것을 알 수 있습니다.
'프로그래밍 > Jquery' 카테고리의 다른 글
| jquery - hover 메소드와 animate 메소드를 이용한 마우스 오버 애니메이션 효과 만들기 (0) | 2014.10.27 |
|---|---|
| jquery - innerfade 플러그인을 이용한 사진 변경 효과 적용하기 (0) | 2014.10.27 |
| jquery - toggle 메소드를 이용한 시각효과 만들기 (0) | 2014.10.20 |
| jquery - 입력양식 이벤트를 이용한 한번에 모든 체크박스를 체크하기 (2) | 2014.10.18 |
| jquery - keyup메소드를 이용한 글자수세기프로그램 만들기 (0) | 2014.10.11 |
| jquery - delegate 방법을 사용한 이벤트 연결 범위 한정 (0) | 2014.10.11 |
| jquery - 기본 이벤트를 제거하고 이벤트 전달 막는 법 2가지 (0) | 2014.10.11 |
| jquery - context 객체 활용 예제 (0) | 2014.10.11 |