티스토리 뷰
안녕하세요. 오늘은 웹문서에 바닐라 자바스크립트 코드를 추가하여 무한스크롤을 구현한 예를 기록해보려 합니다. 스크롤이 최대치(콘텐츠의 끝)까지 내려가면 자바스크립트 코드에 의해 새로운 콘텐츠가 생성 및 추가되는 방식으로 구현한 코드입니다. HTML, CSS, 자바스크립트 코드를 차례대로 살펴보고, 마지막에 전체 코드를 공개하였습니다.
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<h1>무한스크롤</h1>
<section>
<div class="box">
<p>
1번째 블록
</p>
</div>
<div class="box">
<p>
2번째 블록
</p>
</div>
</section>
|
section 태그에는 두 개의 div 가 포함되어 있는데, 각각에는 class="box"가 추가되었습니다. 이 box 요소가 무한하게 추가될 요소입니다. 스크롤을 내리면 내릴수록 section의 하위 태그 개수가 증가할 예정입니다.
CSS
|
1
2
3
4
5
6
7
8
|
html, body{ margin: 0; }
h1 {
position: fixed; top: 0; width: 100%; height: 60px;
text-align: center; background: white; margin: 0; line-height: 60px;
}
section .box {height: 500px; background: red;}
section .box p {margin: 0; color: white; padding: 80px 20px;}
section .box:nth-child(2n) {background: blue;}
|
제목을 담당하는 h1 태그는 페이지 상단에 고정시켰습니다. 그런 다음 section의 하위 태그인 box 요소가 빨강-파랑-빨강 순으로 배경색을 가지도록 해주었습니다. 따라서 브라우저를 막 열었을 때의 기본 상태는 다음과 같습니다.
자바스크립트
|
1
2
3
4
5
6
7
8
9
10
11
|
var count = 2;
window.onscroll = function(e) {
if((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
setTimeout(function(){
var addContent = document.createElement("div");
addContent.classList.add("box")
addContent.innerHTML = `<p>${++count}번째 블록</p>`
document.querySelector('section').appendChild(addContent);
}, 1000)
}
}
|
스크립트에서는 onscroll 이벤트에 대해 이벤트 핸들러를 등록하였습니다. 여기에서는 새로운 콘텐츠가 추가되는 조건을 위해 약간의 산수가 필요한데, 필요한 피연산자들은 다음과 같습니다(위 코드에서 3번 행에 있는 것들)
- window.innerHeight : 이는 브라우저에서 실제로 표시되고 있는 영역의 높이를 의미합니다. 사용자가 보고 있는 영역의 높이인 셈입니다.
- window.scrollY : 스크롤이 Y축으로 얼마만큼 이동했는지를 의미합니다. 맨 처음에 0부터 시작해서 스크롤을 내릴수록 증가하는 값입니다.
- document.body.offsetHeight : offsetHeight는 요소의 실제 높이를 의미합니다. 보여지고 있는 영역 외에 가려진 영역까지 더해진 콘텐츠의 실제 높이입니다. body.offsetHeight 라 함은 사실상 페이지 전체의 높이를 의미하는 셈입니다.
위 코드에서는 페이지 전체 높이만큼 스크롤을 다 내리고 나면 요소가 하나 추가되게끔 만들었습니다. 추가되는 요소는 div 이고, 여기에는 box라는 클래스가 지정됩니다. 추가될 때마다 1초의 시간을 소요하라는 의미에서 setTimeout을 사용해보았는데, 이는 굳이 위와 같이 하지 않으셔도 괜찮습니다.
이상입니다. 간단하게 무한스크롤을 구현해보았는데, 여기에 콘텐츠가 추가되는 동안에 로딩 표시 같은 걸 추가한다거나 하면 더 괜찮은 예제가 만들어질 거라는 생각이 듭니다. 아무튼 이렇게 오늘의 내용은 마무리하고, 마지막으로 전체 코드를 보이면서 끝내도록 하겠습니다.
전체 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>무한스크롤 예제</title>
<style>
html, body{ margin: 0; }
h1 {position: fixed; top: 0; width: 100%; height: 60px; text-align: center; background: white; margin: 0; line-height: 60px;}
section .box {height: 500px; background: red;}
section .box p {margin: 0; color: white; padding: 80px 20px;}
section .box:nth-child(2n) {background: blue;}
</style>
</head>
<body>
<h1>무한스크롤</h1>
<section>
<div class="box">
<p>
1번째 블록
</p>
</div>
<div class="box">
<p>
2번째 블록
</p>
</div>
</section>
<script>
var count = 2;
window.onscroll = function(e) {
console.log(window.innerHeight , window.scrollY,document.body.offsetHeight)
if((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
setTimeout(function(){
var addContent = document.createElement("div");
addContent.classList.add("box")
addContent.innerHTML = `<p>${++count}번째 블록</p>`
document.querySelector('section').appendChild(addContent);
}, 1000)
}
}
</script>
</body>
</html>
|
전체 코드 그대로 복사 & 붙여넣기 해서 사용하시면 결과확인 바로 가능합니다.
감사합니다.
'IT > 프로그래밍' 카테고리의 다른 글
| VSCODE 리액트 자동완성 기능 설정하기 (feat. user snippets) (0) | 2021.03.26 |
|---|---|
| 웹 호스팅 서비스 netlify 사용법 : 내가 만든 웹사이트 배포하기! (1) | 2021.03.19 |
| 자바스크립트 모바일 터치 슬라이더 구현하기 (feat. 터치 이벤트) (0) | 2021.02.27 |
| 자바스크립트 이미지 슬라이드 구현하기 (0) | 2021.02.24 |
| 자바스크립트 타이핑 효과 구현하기 (3) | 2021.02.19 |