Browser 에서 얻을 수 있는 모든 길이와 좌표 그리고 스크롤

Browser 에서 얻을 수 있는 모든 길이와 좌표 그리고 스크롤

브라우저는 아래와 같이 기준으로 삼는 것에 따라서 달라지는 상대적 좌표와 절대적 좌표를 API로 제공함으로써 개발자가 유연하게 사용할 수 있습니다.
사용할 만한 모든 API 목록을 가져왔으니 핸드북 처럼 볼 수 있는 글로 남겨놓을까 합니다.
외울 때는 width,height 키워드 앞에 붙는 수식어들의 의미를 파악하면 직관적으로 외울 수 있을 것 같네요.

구분선으로 분리되어있는 것의 윗 파트는 window 객체에서 제공하는 API 이고, 아랫 부분은 Element 객체에서 제공하는 API 입니다.

Browser 에서 제공하는 길이 API

1. outerWidth, outerHeight : 브라우저 전체 크기를 반환합니다.
2. innerWidth, innerHeight : 뷰포트 크기를 반환 합니다 (스크롤 바를 제외)

-

1. offsetWidth, offsetHeight : Element의 모든 값을 포함한, 전체 크기를 반환합니다. (padding + border 포함)
2. clientWidth, clientHeight : Element의 컨텐츠의 크기를 반환합니다. (padding 포함)
3. clientLeft, clientTop : Element의 border 의 크기를 반환합니다.
4. scrollWidth, scrollHeight : 보이는 것과 상관없이 스크롤 가능한 영역의 크기를 반환합니다.
5. getBoundingClientRect() : 최종적으로 렌더링된 크기를 반환합니다. (예를 들면 transform, transition 등이 적용된 경우, 위의 다른 API들 은 적용되기 전의 크기를 반환합니다.)

좌표 API

1. clientX, clientY : 뷰포트 기준, 마우스의 좌표를 반환합니다.
2. pageX, pageY : 문서 기준, 마우스의 좌표를 반환합니다.
3. screenX, screenY : 모니터 기준, 마우스의 좌표를 반환합니다.
4. offsetX, offsetY : 이벤트 대상을 기준으로 마우스의 좌표를 반환합니다.(div 요소라고 한다면, div 요소의 좌상단이 0,0 이 되는 좌표계를 사용합니다.)
5. getComputedStyle(element).getPropertyValue() : Element의 스타일 값을 반환합니다.
6. getBoundingClinetRect() : 최종적으로 렌더링된 위치를 반환합니다.

스크롤 API

1. scrollX, scrollY : window 기준, scroll 된 값을 반환합니다. (구형브라우저 = pageXOffset, pageYOffset)

-

1. scrollTop, scrollLeft : Element의 현재 스크롤 값을 반환합니다.
2. scrollWidth, scrollHeight : Element의 스크롤 가능한 크기를 반환합니다. (스크롤의 최대 값을 구하려면, 이 값에서 clientWidth, clientHeight 를 빼주면 됩니다)

• scrollTo(x,y) : 특정 좌표로 스크롤 합니다. (window, Element 모두 사용 가능)
• scrollBy(x,y) : 현재 스크롤 위치에서 x,y 만큼 스크롤 합니다. (window, Element 모두 사용 가능)
• scrollIntoView() : Element 가 보이도록 스크롤 합니다. (Element 만 사용 가능)