Today I Learn (0323)
1. 오늘의 프로젝트 구현 내용
오늘은 무한스크롤을 공부해봤다. 여러가지 방법이 있는 것 같지만, 일단은 Javascrript방식으로 구현해보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>무한스크롤 예제</title>
<style>
html, body{margin: 0;}
section .box{
height: 500px; background: tomato; color: white;
box-sizing: border-box; padding: 30px 10px;
}
section .box:nth-child(2n) {background: teal;}
</style>
</head>
</html>- 먼저 각각 칠해질 박스의 CSS들을 정의해준 후에
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>무한스크롤 예제</title>
<style>
html, body{margin: 0;}
section .box{
height: 500px; background: tomato; color: white;
box-sizing: border-box; padding: 30px 10px;
}
section .box:nth-child(2n) {background: teal;}
</style>
</head>
<body>
<section>
<div class="box">1번째 블록</div>
<div class="box">2번째 블록</div>
</section>
<script>
let count = 2
window.onscroll = () => {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
const toAdd = document.createElement("div")
toAdd.classList.add("box")
toAdd.textContent = `${++count}번째 블록`
document.querySelector('section').appendChild(toAdd)
}
}
</script>
</body>
</html>window.innerHeight : 현재 브라우저에서 보이고 있는 높이
window.scrollY: 스크롤을 내리는 높이
document.body.offsetHeight : body안에 들어있는 내용물의 총 높이
-
이렇게 봤을 때 내용물의 총 높이는 innerHeight보다 크기 때문에, 한번에 다 들어오지 않는다.
-
따라서 화면에서 보이고 있는 높이와 스크롤을 내렸을 때의 높이의 합이 내용물 전체의 합과 같아지는 시점이 바로 새로운 내용물들이 뒤에 붙게 되는 경우인 것이다.
아코 자네 개발이 하고 싶나