무한 스크롤
- 컨텐츠를 계속해서 받아오기 위해 스크롤을 무한으로 생성한다.
- 스크롤의 높이와 해당 문서의 높이를 비교하는 것이 주 로직.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$(window).scroll(function () {
var DocHeight = $(document).height();
var ScrollHeight = $(window).scrollTop() + $(window).height();
if(DocHeight <= ScrollHeight) {
for(var i=0; i<5; i++) {
$('<h1>scroll</h1>').appendTo('body');
}
}
});
});
$(document).ready(function () {
for(var i = 0; i < 15; i++) {
$('<h1>scroll</h1>').appendTo('body');
}
});
</script>
| cs |
1. 자바스크립트에 내장돼 있는 window 객체의 scroll 함수호출.
2. DocHeight에는 해당 문서의 길이를 입힌다.
3. ScrollHeight에는 스크롤바의 끝값과 브라우저창의 높이의 합을 입힌다.
4. 문서의 길이가 스크롤바끝과 브라우저창 높이합보다 작으면 결과문 실행.
5. 문서길이를 임의로 길게 하기 위해 appendTo로 h1태그 계속 삽입.
* $(window).scrollTop()
: $(document).height - $(window).height의 결과값으로, 당연히 문서의 길이에서 브라우저창의 길이를 빼면 스크롤창의 맨 마지막까지의 길이를 알 수 있다.
--> 즉, scrollTop은 스크롤창의 픽셀수와 같다. 따라서 스크롤창이 생기지 않을만큼 문서길이가 짧거나 스크롤바가 문서의 맨 위에 있는 경우 scrollTop의 길이는 0이 된다. (The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be
0)
댓글 없음:
댓글 쓰기