Element sizes

element의 크기/위치에 관한 것이다보니 css의 width, height이 떠오를 수도 있습니다.
그러나 css는 box-sizing 속성에도 영향을 받고, auto일 경우에도 정확한 수치값을 얻지 못하는 점을 참고하셔야 합니다.

box model이해

content, padding, border, margin 영역. 브라우저마다 스크롤 여부에 따른 content 계산 법이 다를 수 있습니다.

offsetLeft/Top

offsetParent 브라우저가 렌더링하는 동안 좌표를 계산하는데 사용하는 가장 가까운 조상. offset-들의 기준점이 됩니다.
가장 가까운 조상은 보통 position속성을 가진 요소, table, td, th, body요소 입니다.

*offsetParent가 null인 경우
1. 문서에 없거나 display:none인 경우
2. body, html인 경우
3. 엘리먼트가 position:fixed인 경우

offsetLeft - offsetParent로부터 떨어진 x좌표
offsetTop - offsetParent로부터 떨어진 y좌표

offsetWidth/Height

offsetWidth - border를 포함한 가로길이
offsetHeight - border를 포함한 세로길이

clientTop/Left

바깥영역에서 안쪽영역과의 상대적인 거리를 의미합니다.
padding까지가 안쪽영역으로 계산됩니다. 보통은 border의 값이 나오지만, 때에 따라 스크롤바가 위/왼쪽에 생긴다면 그것까지 추가됩니다.

clientWidth/Height

border 안의 크기를 제공. padding까지는 포함하지만 scrollbar는 포함하지 않습니다.

scrollWidth/Height

보이는 부분만 얘기하는 clientWidth/Height과 달리 스크롤 영역까지 전부 포함한 콘텐츠의 width/height

scrollLeft/Top

요소에서 스크롤되고 숨겨진 부분의 너비/높이 입니다.
공간과 관련된 속성들(위에 있었던 속성들)은 읽기전용이지만, 이 속성들은 값을 변경할 수 있습니다.
example)
top button -> elem.scrollTop(0);
bottom button -> elem.scrollTop(Infinity);

Window sizes

width/height of the window

document.documentElement.clientWidth - 윈도우의 width
document.documentElement.clientHeight - 윈도우의 height

window.innerWidth/innerHeight은 스크롤바를 포함한 영역입니다.

width/height of the document

document.documentElement.scrollWidth - 문서 전체의 width
document.documentElement.scrollHeight - 문서 전체의 height

주의할 점
스크롤이 되지 않은 윈도우라면 scrollHeight이 clientHeight보다도 적게 나옵니다. 따라서 스마트하진 않지만 있는 것중에 제일 높은 수치를 가져오는 걸 택합니다.

let scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

scrolling

document.documentElement.scrollTop/Left 는 브라우저별로 상이하게 동작할 수 있어서 그런 이슈가 없는 아래 메소드들을 사용하길 권합니다.

scrollBy(x, y) - 현재 위치에서 상대적으로 스크롤됨.
scrollTo(pageX, pageY) - scrollLeft/scrollTop처럼 해당요소의 왼쪽 위가 페이지의 왼쪽 위값과 일치 시킵니다.

---

elem.scrollIntoView(top)
페이지를 스크롤하여 해당 elem을 보이게 만듦.
top == true 이면 해당 elem이 윈도우 맨 위에 위치하게 해주고, top == false면 해당 elem이 윈도우 맨 아래에 위치하게 해줍니다.

---

document.body.style.overflow = 'hidden' 스크롤 금지

Coordinates

clientX/clientY

relative to the window.

pageX/pageY

relative to the document

getBoundingClientRect

elem.getBoundingClientRect()는 윈도우 기준으로 elem의 x와 y, elem의 width와 height, top/bottom/left/right값을 보여줍니다.
top,bottom,left,right는 elem의 각 위치에 해당하는 좌표값이며,
bottom과 right는 css의 기준과 다릅니다. 윈도우에서 안보이는 곳으로 가면 음수값으로 표시됩니다.

document.elementFromPoint(x, y)

css의 position:fixed처럼 윈도우를 기준으로 좌표를 잡아줌. 여기서는 특정 요소가 중요하지 않습니다.