scroll
- 스크롤바의 Y좌표
const scrollTop = window.scrollY; - 웹 브라우저의 창 높이
const windowHeight = window.screen.availHeight; - HTML 문서의 높이
const documentHeight = document.body.scrollHeight;
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<style>
.box1 {
height: 1700px;
background: linear-gradient(0deg, #c0dcfe 0, #223ff6 100%);
}
</style>
</head>
<body>
<div id="container">
<div class="box1"></div>
</div>
<script>
// 스크롤은 대부분 브라우저 레벨에서 수행되므로 window 객체에 대해서 이벤트를 정의해야 한다.
window.addEventListener("scroll", (e) => {
// 스크롤바의 Y좌표
const scrollTop = window.scrollY;
// 웹 브라우저의 창 높이
const windowHeight = window.screen.availHeight;
// HTML 문서의 높이
const documentHeight = document.body.scrollHeight;
console.log("스크롤이 발생하고 있음: scrollTop=" + scrollTop + ", documentHeight=" + documentHeight + ", windowHeight=" + windowHeight);
// 스크롤바의 반동 효과를 고려해서 scrollTop + windowHeight가 실제 화면 크기보다 커질수도 있다.
if (scrollTop + windowHeight >= documentHeight) {
console.log("스크롤이 맨 끝에 도착함");
const container = document.querySelector("#container");
container.innerHTML += '<div class="box1"></div>';
}
});
</script>
</body>
</html>처음에 실행이 안되서 왜 안되나 했더니 최대한 내렸을 때
scrollTop=416.6666564941406, documentHeight=2000, windowHeight=1392
s + w = 1808 이 나왔다
위에서 box1의 height = 2000px 로 설정했기 때문에 scrollTop + windowHeight 가 아무리 커져도 documentHeight보다 같거나 커지지 않아서 실행되지 않은 것이었다.
열린 창의 높이를 줄이니 제대로 실행되었다.
- 예상되는 원인
- 4k 모니터를 사용중인데 해상도가 너무 큼.
- 윈도우 창정렬이 원래의 창크기보다 크게 설정시키는 것 같다.
box1의 height=1700px로 바꾸어 실행
- 여전히 제대로 동작하지 않음.
- 원인
- 크롬에서 ctrl + scrolldown 으로 원래의 배율보다 100%보다 작게 설정해놨기 때문이었다.
- 배율을 작게할수록 scrollTop이 줄어듬
Hi