창이 차지하는 너비와 높이를 알기 위해서는 루트 문서 요소인 document.documentElement
의 clientWidth, clientHeight
를 사용하면 된다.
document.documentElement
는 <html>
태그와 상응하는 요소로, 다양한 메서드를 지원한다.
**DOM 요소의 현재 스크롤 상태(스크롤에 의해 가려진 영역에 대한 정보)**는 scrollLeft와 scrollTop 프로퍼티를 통해 구할 수 있다.
(다만, 구버전 브라우저 버그 때문에 document.body를 이용하여 구할 수 있다. 이를 방지하기 위해 그냥 window 객체의 pageXOffset
과 pageYOffset
을 사용한다. 이 프로퍼티들은 브라우저 상관없이 스크롤 정보를 구할 수 있다.)
alert('세로 스크롤에 의해 가려진 위쪽 영역 높이: ' + window.pageYOffset);
alert('가로 스크롤에 의해 가려진 왼쪽 영역 너비: ' + window.pageXOffset);
일반 요소의 스크롤 상태는 scrollTop이나 scrolLeft로 쉽게 변경할 수 있다.
페이지 전체의 스크롤 상태 역시, document.documentElement의 scrollTop/scrollLeft를 사용하여 변경 가능하다. (Safari는 document.body 이용)
마찬가지로 브라우저 상관없이 쓸 수 있는 메서드가 있다.
window.scrollBy(x, y)
- 페이지의 스크롤 상태를 현재 포지션을 기준으로 상대적 조정window.scrollTo(pageX, pageY)
- 절대 좌표를 기준으로 페이지 스크롤 상태를 변경한다. 따라서 눈에 보이는 영역의 왼쪽 위 모서리 좌표가 문서 전체 왼쪽 위 모서리를 기준으로 (pageX, pageY)가 된다. 마치 scrollLeft와 scrollTop을 변경한 것처럼 움직인다.