🌿 디바이스 동적 스크롤 % 감지

document.documentElement.scrollHeight 메서드는 전체 문서의 높이를 알려줍니다. 즉 이 값은 페이지에 스크롤 할 수 있는 전체 길이를 나타내며, 페이지의 내용이 얼마나 긴지 알려줍니다!

window.scollY 메서드는 현재페이지에서 사용자가 스크롤한 수직 길이를 가져옵니다. 이 값이 0이면 페이지의 최상단인 것이고, 값이 커질수록 더 아래로 스크롤한 것이죠.

document.documentElement.clientHeight 메서드는 현재 뷰포트의 높이를 가져옵니다. 즉, 브라우저 창의 내부 높이로, 스크롤바를 포함하지 않은 크기입니다.

그럼 스크롤이 맨 마지막에 도달했다는 것을 어떻게 계산해서 알 수 있을까요? 같이 생각해볼까요?

📝 실습 코드