scroll, client, offset 활용하기

뺩·2022년 7월 29일

JavaScript

신기한 개발 세상

목록 보기

3/12

프론트를 만들다 보면 저 다양한 요소들을 활용해야하는 일들이 자주 생긴다.
근데 문제는 나는 쟤네가 맨날 헷갈린다. 그래서 이번에 한번 정리를 하고 가려고 한다.

offset

offsetParent, offsetLeft, offsetTop

offset은 요소가 화면에서 차지하는 영역 전체 크기를 나타낸다. 이때 margin은 빠진다.

offsetParent : 해당 요소를 랜더링할 때 가장 가까운 parent 요소의 참조를 반환한다.
offsetLeft와 offsetTop: offsetParent를 기준으로 각각 요소가 오른쪽으로, 아래쪽으로 얼마나 떨어져 있는지를 나타낸다.

<main style="position: relative" id="main">
  <article>
    <div id="example" style="position: absolute; left: 180px; top: 180px">...</div>
  </article>
</main>
<script>
  alert(example.offsetParent.id); // main
  alert(example.offsetLeft); // 180 (주의: 문자열 '180px'이 아닌 숫자 180이 반환됩니다.)
  alert(example.offsetTop); // 180
</script>

offsetWidth, offsetHeight

각각 요소 '가장 바깥 부분(outer)'이 차지하는 너비와 높이 정보를 제공한다. 테두리를 포함한 요소 '전체’의 사이즈 정보를 제공한다고 보면 된다.

위 샘플 요소의 계산법을 보면

offsetWidth = 390 로 CSS width 프로퍼티(300px)를 사용해 얻을 수 있는 바깥 너비에 패딩(2 20px)과 테두리(2 25px) 너비를 더한 값이다.
offsetHeight = 290 로 바깥 높이이다.

client

clientTop, clientLeft

이 둘을 활용하면 border 두께를 측정할 수 있다.

하지만 이건 왼쪽에서 오른쪽으로 전개되는 언어일 경우에 해당하고 아랍어처럼 오른쪽에서 왼쪽으로 전개될 땐 clientLeft에 스크롤바의 넓이가 포함되어 오차가 생긴다.

clientWidth, clientHeight

offsetWidth와 offsetHeight가 테두리를 포함해 너비와 높이 정보를 알려줬다면 clientWidth와 clientHeight는 테두리 내부의 너비와 높이 정보를 알려준다. 테두리 안 패딩과 콘텐츠의 너비와 높이는 포함되지만 스크롤바의 너비는 제외된다.

패딩잉 없다면

콘텐츠 너비, 높이가 각각 clientWidth, clientHeight와 일치하기 때문에 두 프로퍼티를 이용해서 콘텐츠의 너비와 높이를 구할 수 있다. 하지만 이 경우엔 스크롤바에 의해 가려진 부분들은 포함할 수 없다.

scroll

scrollWidth, scrollHeight

이 두 프로퍼티는 위에서 설명한 clientWidth, clientHeight와 유사하지만 이름에 scroll이 들어간거에서 보이듯이 scroll에 의해 감춰진 부분까지 포함한다.

scrollTop, scrollLeft

각각 세로방향과 가로방향으로 요소가 몇 pxel이나 세로 스크롤됐는지 알려준다.

활용하기

위와 같은 기능을 만들기 위해 어떻게 했는가..!
1. 카테고리의 offsetTop을 구하고 현재 헤더의 clientHeight를 구한다.
2. hook을 이용해 document의 scrollTop을 계속 받아온다.
3. 헤더 높이 + scrollTop >= 카테고리의 offsetTop 이면 카테고리바에 position: fix와 top: 헤더높이를 줘서 헤더 밑에 고정시키고 아닐 땐 fix를 해제한다.