제목 그대로...
편의상 jquey를 썼으나 일반 js 로 하기에도 높이 값들 가져오는 명령만 다를뿐 큰 차이는 없음
(초보시라면 위 이미지 출처 사이트에 추가 설명이 잘 되어 있으니 한번 보시는 것을 추천)
var noMore = false;
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var innerHeight = $(window).height();
var scrollHeight = $(document).height();
if (scrollTop + innerHeight >= scrollHeight) {
//스크롤이 바닥치면 뭐할지 여기에 정의 시작
if (!noMore) {
$("body").append("<div>");
}
noMore = ($("div").length == 5); //예제니까 5번만...
//스크롤이 바닥치면 뭐할지 여기에 정의 끝
}
});
뭘 할지는 각자 알아서.. 입맛에 맞게...
참고로 그 뭔가가... ajax로 다른 내용을 불러오는 것일 수 있는데.. (페이징 대신 스크롤로 내용 추가 불러오는?)
이때 로딩중에는 스크롤이 바닥에 와도 아무것도 안하게 처리하는게 필요 할 듯
그리고, <!DOCTYPE html> 지정 필수 안그럼 높이 값이 이상하게 잡힐 수 있음
소스와 예제는 아래에...
'웹 코딩 > JS + jQuery' 카테고리의 다른 글
| IE 에만 적용되는 스크립트 (1) | 2020.08.25 |
|---|---|
| 파일 업로드 미리 보기 (1) | 2020.08.14 |
| 비밀번호 보이기 감추기 (0) | 2020.08.06 |
| jQuery - selectors / 선택자 목록 (0) | 2020.08.06 |
| 나타났다 사라지는 토스트 메시지 - toast (0) | 2020.08.02 |
댓글