브라우저 창 사이즈와 스크롤

브라우저 창이 차지하는 너비와 높이를 어떻게 구할 수 있을까요?
스크롤 때문에 보이지 않는 영역을 포함하여 문서 전체가 차지하는 너비와 높이는 어떻게 구할 수 있을까요?
자바스크립트를 사용해서 페이지를 스크롤 할 수 있을까요?

위와 같은 물음에 답을 주는 루트문서 요소인 document.documentElement를 살펴보자.
document.documentElement는 < html >태그와 상응하는 요소로 다양한 메서드를 지원한다.

window객체도 innerWidth와 innerHeight프로퍼티로 창의 크기를 반환해주지만 스크롤바크기를 고려하지 않기때문에 document.documentElement의 clientWidth, clientHeight를 사용하는 것이 좋다.

기하관련 프로퍼티는 HTML에 문서에 < !DOCTYPE HTML >이 명시되어있지 않으면 정확한 값이 반환되지 않는다.

문서의 너비와 높이

여러 브라우저의 특성을 고려하여 문서높이를 구할때는 아래와 같이 하는 것이 좋다.

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

alert('스크롤에 의해 가려진 분을 포함한 전체 문서 높이: ' + scrollHeight);

스크롤 정보 얻기

alert('세로 스크롤에 의해 가려진 위쪽 영역 높이: ' + window.pageYOffset);
alert('가로 스크롤에 의해 가려진 왼쪽 영역 너비: ' + window.pageXOffset);

scrollTo, scrollBy로 스크롤 상태 변경하기

scrollBy(x,y)메서드를 사용하면 페이지의 스크롤 상태를 현재 포지션을 기준으로 상대적으로 조정합니다. scrollBy(0,10)는 문서의 스크롤 상태를 현재를 기준으로 스크롤을 10px아래로 내린것 처럼 움직여주죠.

scrollTo(pageX,pageY)메서드는 절대 좌표를 기준으로 페이지 스크롤 상태를 변경합니다.

scrollIntoView
elem.scrollIntoView(top)를 호출하면 전체 페이지 스크롤이 움직여 elem이 눈에 보이는 상태로 변경됩니다. elem.scrollIntoView는 인수를 하나 받는데, 인수에 따라 다음과 같이 동작합니다.

top이 true(디폴트)인 경우, elem이 창 제일 위에 보이도록 스크롤 상태가 변경됩니다. elem의 위쪽 모서리가 창의 위쪽 모서리와 일치하게 되죠.
top이 false인 경우, elem이 창 가장 아래에 보이도록 스크롤 상태가 변경됩니다. elem의 아래쪽 모서리가 창의 아래쪽 모서리와 일치하게 변합니다.