출처 : https://javascript.info/size-and-scroll-window
browser window의 width, height를 어떻게 구할 수 있을까? document의 full width, height를 어떻게 구할 수 있을까?
JavaScript로 page를 어떻게 scroll할 수 있을까?
Width/height of the window
window 가로세로를 알기 위해서, document.documentElement.clientWidth/clientHeight를 사용할 수 있다.
window.innerWidth/innerHeight는 scrollbar를 포함한다.
alert( window.innerWidth ); // window 가로 전체
alert( document.documentElement.clientWidth ); // window 가로에서 scrollbar를 뺀 것Width/height of the document
root document element는 document.documentElement이다. 그리고 모든 컨텐츠를 갖고 있으며 document.documentElement.scrollWidth/scrollHeight로 document의 전체 사이즈를 측정할 수 있다.
하지만 Chrome/Safari/Opera에서 잘 작동하지 않고, scroll이 없는 경우 documentElement.scrollHeight는 documentElement.clientHeight보다 작아진다.
안정적으로 값을 얻기 위해서는 이 properties의 maxium을 찾아야 한다.
let scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
alert('Full document height, with scrolled out part: ' + scrollHeight);Get the current scroll
DOM elements는 scrollLeft/scrollTop properties값에 현재 scroll 상태를 갖고 있다.
alert('Current scroll from the top: ' + window.pageYOffset);
alert('Current scroll from the left: ' + window.pageXOffset);window.scrollX/scrollY를 사용할 수도 있다.
Scrolling: scrollTo, scrollBy, scrollIntoView
* JavaScript로 page를 scroll하기 위해서는 DOM이 완전히 built되어야 한다. 따라서 <head>에 있는 script로 page를 scroll하려고 하면 동작하지 않는다.
일반적인 element는 scrollTop/scrollLeft 변경에 의해 scroll된다.
page에도 동일하게 document.documentElement.scrollTop/scrollLeft를 사용할 수 있다.
window.scrollBy(x, y), window.scrollTo(pageX, pageY)라는 함수로 더 간단히 처리할 수 있다.
- scrollBy(x, y) : 현재 위치로 부터 상대적으로 page를 scroll한다. 예를들어 scrollBy(0, 10)하면 page를 10px scroll down한다.
- scrollTo(pageX, pageY) : page를 절대좌표로 scroll한다. visible part의 top-left corner는 document의 top-left corner에 상대적인 (pageX, pageY)좌표값을 갖는다. 처음으로 돌아가려면 scrollTo(0, 0)사용하면 된다.
scrollIntoView
elem.scrollIntoView(top) : elem visible되도록 page를 scroll한다.
- top = true (default) : elem이 window의 top에 나타나도록 page를 scroll한다.
- top = false : element의 bottom edge가 window bottom과 나란하게 보이도록 page를 scroll한다.
Forbid the scrolling
page를 unscrollable하게 하려면 document.body.style.overflow = "hidden"으로 설정하면 된다.
page는 현재 scroll position에서 고정된다.
document.body.style.overflow = "hidden"; //스크롤되지 않게 한다.
document.body.style.overflow = ""; //다시 스크롤되게 한다.document.body 뿐만 아니라 다른 element에도 적용할 수 있다.
Summary
Geometry :
- document의 visible part의 width/height : document.documentElement.clientWidth/clientHeight
- scrolled out part 포함된 전체 document의 width/height
let scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);Scrolling :
- 현재 스크롤 값 : window.pageYOffset/pageXOffset
- 현재 scroll 변경
- window.scrollTo(pageX, pageY)
- window.scrollBy(x, y)
- elem.scrollIntoView(top
'JavaScript' 카테고리의 다른 글
| JavaScript] DOM events, Event handler, addEventListener (0) | 2022.11.22 |
|---|---|
| JavaScript] Coordinates (element 좌표) (0) | 2022.11.17 |
| JavaScript] Document Styles and classes (1) | 2022.11.14 |
| JavaScript] document 수정 (0) | 2022.11.11 |
| JavaScript] HTML attributes and DOM properties (0) | 2022.11.08 |
댓글