ScrollingElement
Document 인터페이스의 scrollingElement 속성은 문서를 스크롤하는 Element 에 대한 읽기 전용 참조를 반환합니다.
(더 자세한 내용은 MDN 문서에 있습니다. 👍)
이 scrollingElement 속성의 값 중 3개의 값을 사용하면 스크롤이 끝났는지 확인이 가능합니다.
스크롤이 끝났는지 확인하는 방법
scrollingElement 에는 scrollHeight , scrollTop 그리고 clientHeight 속성이 존재합니다.
이 속성에 대해 간단히 설명하면,
- scrollHeight : 요소의 스크롤 가능한 높이
- scrollTop : 요소 최상단에서 얼마나 스크롤 했는지의 픽셀 값
- clientHeight : 사용자가 한 번에 볼 수 있는 컨텐츠의 높이
입니다.
이 값을 어떻게 사용해야하는지 느낌이 오시나요?! 😉
element.scrollHeight - element.scrollTop === element.clientHeight위 공식을 해석해보면,
요소의 전체 높이에서 사용자가 현재 스크롤한 위치가 사용자가 한 번에 볼 수 있는 컨텐츠의 높이와 같다는 것은 사용자가 끝까지 스크롤을 했다는 의미와 같습니다.
따라서 다음과 같은 메서드를 만들어 사용할 수 있습니다 :
요소의 스크롤이 끝났는지 확인하여 Boolean 을 반환하는 메서드이죠.
지금까지 브라우저에서 스크롤이 끝났는지 확인하는 방법에 대해서 알아보았습니다.
감사합니다! 😃
