자바나라
[JavaScript] 스크롤 맨 아래점 도달 시 글 불러오기 본문
* 스크롤에 대한 기초 지식
1. $(window).scrollTop()
2. $(window).height()
3. $(document).height()
이 세 가지만 알면 스크롤이 맨아래 도달시에 조건을 핸들러로 사용하여 글을 불러오는 등의 동작을 할 수 있습니다.
1. $(window).scrollTop()
: 스크롤의 위치에 따라 변하는 값 (세로 좌표)
: 맨 위에서 0으로 시작하여 맨아래 도달시 스크롤 길이 max값을 가짐.
http://www.trandent.com/jsTest/22393920144658
위 사이트에서 한번 동작해보면 이해하기 수월합니다.
2. $(window).height()
: 보여지는 창의 높이길이
3. $(document).height()
: jsp, html 등 문서의 높이 길이
: 보여지는 창의 높이 길이 보다 문서의 길이가 길다면 스크롤이 생깁니다.
**구현 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $(window).scroll(function() { var scrolltop = $(document).scrollTop(); console.log(scrolltop); var height = $(document).height(); console.log(height); var height_win = $(window).height(); console.log(height_win); if (Math.round( $(window).scrollTop()) == $(document).height() - $(window).height()) { moreList(); } | cs |
$(window).scroll(function() {
: 윈도우의 스크롤을 움직일때 function이 작동합니다.
var scrolltop = $(document).scrollTop();
console.log(scrolltop);
var height = $(document).height();
console.log(height);
var height_win = $(window).height();
console.log(height_win);
: 콘솔에 값을 찍어보면서 작업하면 동작 이해에 도움이 됩니다.
if (Math.round( $(window).scrollTop()) == $(document).height() - $(window).height()) {
moreList();
}
: Math.round() 메소드는 해당 숫자를 반올림 해주는 기능을 합니다.
$(document).scrollTop() 값이 double형인데다가 약간의 오차가 생겨서 반올림을 해줬더니 잘 작동되었습니다.
: Math.round( $(window).scrollTop()) == $(document).height() - $(window).height() {
moreList();
}
(스크롤을 맨 밑으로 내렸을 때의 스크롤 길이 값) == (문서의 길이) - (창의 길이) 조건을 만족할 때 글을 추가로 불러옵니다.
질문이 있으시면 댓글로 질문을
도움이 되셨다면 공감 버튼을..!
'오늘 배운 자바' 카테고리의 다른 글
[JQuery] 자바스크립트 이벤트가 2회 중복 실행될 때 (0) | 2018.07.17 |
---|---|
[JSP]게시글 하나에 여러개 사진 리스트 출력 (0) | 2018.07.09 |
Tomcat 포트 충돌시 해결 방법 (0) | 2018.05.18 |
[Mybatis] 방금 Insert한 row를 select 하고 싶을 때 : selectKey (2) | 2018.05.02 |
[JQuery] $(this)에 관하여 : selecter (2) | 2018.04.30 |
Comments