브라우저 창의 너비와 높이

창이 차지하는 너비와 높이를 알기 위해서는 루트 문서 요소인 document.documentElementclientWidth, clientHeight를 사용하면 된다.

document.documentElement<html> 태그와 상응하는 요소로, 다양한 메서드를 지원한다.

image.png

스크롤 정보 얻기

**DOM 요소의 현재 스크롤 상태(스크롤에 의해 가려진 영역에 대한 정보)**는 scrollLeft와 scrollTop 프로퍼티를 통해 구할 수 있다.

(다만, 구버전 브라우저 버그 때문에 document.body를 이용하여 구할 수 있다. 이를 방지하기 위해 그냥 window 객체의 pageXOffsetpageYOffset을 사용한다. 이 프로퍼티들은 브라우저 상관없이 스크롤 정보를 구할 수 있다.)

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

스크롤 상태 변경하기

일반 요소의 스크롤 상태는 scrollTop이나 scrolLeft로 쉽게 변경할 수 있다.

페이지 전체의 스크롤 상태 역시, document.documentElement의 scrollTop/scrollLeft를 사용하여 변경 가능하다. (Safari는 document.body 이용)

마찬가지로 브라우저 상관없이 쓸 수 있는 메서드가 있다.