[JS] DOM : 크기와 좌표

window.innerWidth / innerHeight

Viewport(현재 화면)의 크기를 얻음

window.scrollX / scrollY

Viewport의 현재 스크롤 위치를 얻음 (페이지 좌상단 기준)

E.scrollLeft / E.scrollTop

스크롤 요소의 현재 스크롤 위치를 얻음 (요소의 좌상단 기준)

window.el = document.querySelector('.scrollElement')
el.scrollLeft  // 수평 스크롤 위치
el.scrollTop   // 수직 스크롤 위치

window.scrollTo() / 스크롤요소.scrollTo()

지정된 위치로 스크롤 하기

대상.scrollTo(X, Y)

// 또는
대상.scrollTo({
  left: x좌표, 
  top: y좌표, 
  behavior: 'smooth'  // 스크롤 부드럽게
})

E.clientWidth / E.clientHeight

border(+스크롤바)를 제외한 요소의 크기를 얻기

E.offsetWidth / E.offsetHeight

border(+스크롤바)를 포함한 요소의 크기를 얻기 (더 자주 사용)

E.offsetLeft / E.offsetTop

요소의 위치를 얻음 (페이지의 좌상단 기준)

E.getBoundingClientRect()

border를 포함한 요소의 크기와, "현재 화면"에서 요소의 상대 위치 정보를 얻음