jQuery를 통한 무한 스크롤 구현
오라클자바커뮤니티에서 설립한 오엔제이프로그래밍
실무교육센터
(오라클SQL, 튜닝, 힌트,자바프레임워크, 안드로이드, 아이폰, 닷넷 실무전문 강의)
window객체에 scroll 이벤트 연결원리
사용자가 마우스 스크롤 움직이면 scroll 이벤트 발생
무한 스크롤 만들려면 화면 끝까지 스크롤이 도달 했다는 사실 인식 필요
document 객체의 height 속성은 문서 전체의 높이의미
스크롤이 끝까지 내려가면 window객체 scrollTop +height=document 객체높이
<script type="text/javascript">
$(document).ready(function() {
//스크롤 이벤트 발생 시
$(window).scroll(function() {
var scrollHeight = $(window).scrollTop()+$(window).height();
var documentHeight = $(document).height();
if (scrollHeight = documentHeight) {
for(var i=0; i <10; i++) {
$("<h1>무한 스크롤 </h1>").appendTo("body");
}
}
});
});
$(document).ready(function() {
for(var i=0; i<20; i++) {
$("<h1>무한 스크롤</h1>").appendTo("body");
}
});
</script><body></body>
$(document).ready(function() {
//스크롤 이벤트 발생 시
$(window).scroll(function() {
var scrollHeight = $(window).scrollTop()+$(window).height();
var documentHeight = $(document).height();
if (scrollHeight = documentHeight) {
for(var i=0; i <10; i++) {
$("<h1>무한 스크롤 </h1>").appendTo("body");
}
}
});
});
$(document).ready(function() {
for(var i=0; i<20; i++) {
$("<h1>무한 스크롤</h1>").appendTo("body");
}
});
</script><body></body>
댓글 없음:
댓글 쓰기