09009
[JQuery] 무한 스크롤 본문
무한 스크롤
사용자가 스크롤을 끝까지 내릴 경우 자동으로 데이터를 추가하여 스크롤이 끝나지 않게 만들어주는 기능
- 스크롤 이벤트가 발생하면, 전체 문서의 높이가 스크롤 높이와 웹 브라우저 창의 높이를 더한 값과 같은지 확인한다.
이 조건을 충족할 경우에만 데이터를 추가하는 원리이다.
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<title>Infinity Scroll</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
var j = 0;
// 이벤트를 연결합니다.
$(document).ready(function () {
// 문서 객체 추가 함수
var appendDocument = function() {
for (var i = 0; i < 20; i++) {
// 문서 객체를 생성합니다.
$('<h1>Infinity Scroll ' + j + '</h1>').appendTo('body');
j += 1;
}
};
// 초기에 문서 객체를 추가합니다.
appendDocument();
// 이벤트를 연결합니다.
$(window).scroll(function () {
// 변수를 선언합니다.
var scrollHeight = $(window).scrollTop() + $(window).height();
var documentHeight = $(document).height();
// 검사합니다.
if (scrollHeight == documentHeight) {
appendDocument();
}
});
});
</script>
</head>
<body>
</body>
</html>위 소스코드를 실행하면 스크롤이 끝에 도달하는 순간 문서 객체가 새롭게 추가된다.
'Front-End > JQuery' 카테고리의 다른 글
| [JQuery] 문서 객체 생성과 추가 (0) | 2023.04.04 |
|---|---|
| [JQuery] 시각 효과 (0) | 2023.04.04 |
| [JQuery] 이벤트 (0) | 2023.04.04 |
| [JQuery] 문서 객체 조작 (0) | 2023.04.03 |
| [JQuery] 문서 객체 선택 (0) | 2023.04.03 |
Comments