무한 스크롤을 구현하기 위해 scroll event에 대해 알아보던 중 브라우저 element의 height에 대해 정리해보기로 했다. 스크롤이 화면 끝에 닿았을 때 새로운 컨텐츠를 보여주어야 하는 무한 스크롤 구현이 목적이기 때문에 width는 제외하고 height 위주로 정리하였다.
정리
scrollHeight
These properties are like clientHeight, but they also include the scrolled out (hidden) parts.
- 현재 보이는 화면에서 가려진 영역까지(scrolled out parts) 즉, 컨텐츠 전체의 내부 높이라고 볼 수 있다. (컨텐츠 margin 제외)
scrollTop
Properties scrollTop are the height of the hidden, scrolled out part of the element.
- 위에서부터 가려진 영역(scrolled out parts)의 높이이다.
offsetHeight
These two properties are the simplest ones. They provide the “outer” width/height of the element. Or, in other words, its full size including borders.
- margin을 제외한 요소의 높이이다. (padding, border 포함)
offsetTop
The offsetParent is the nearest ancestor that the browser uses for calculating coordinates during rendering.
That’s the nearest ancestor that is one of the following:
1. CSS-positioned (position is absolute, relative, fixed or sticky), or
2.<td>,<th>, or<table>, or
3.<body>.
Properties offsetLeft/offsetTop provide x/y coordinates relative to offsetParent upper-left corner.
- offsetParent : 브라우저가 렌더링하면서 좌표를 계산할 때 사용하는 가장 가까운 조상요소로, 이중 하나에 해당한다.
- css-position (absolute or relative or fixed or sticky)
<table>,<td>,<th><body>
- offsetTop : offsetParent의 좌측 상단을 기준으로 상대적인 y축 좌표값을 제공한다.
clientHeight
These properties provide the size of the area inside the element borders.
They include the content width together with paddings, but without the scrollbar.
- margin, border, scrollbar를 제외한 요소 내부의 높이이다. (padding 포함)
clientTop
Inside the element we have the borders.
To measure them, there are properties clientTop and clientLeft.
- 간단하게 보자면 외부 border width/height 값이라고 보면 된다. (자세한 설명은 참조 링크 확인)
무한 스크롤 구현은..
- scrollHeight, scrollTop, clientHeight을 활용하여 scrollTop과 clientHeight 값을 더했을 때 scrollHeight 값을 넘는 경우 페이지가 추가 로딩되도록 구현하기로 했다.
참조
