Window Size
window.screen : 모니터 사이즈
window.screen.width / window.screen.height
window.outer : 브라우저 전체 사이즈
window.outerHeight / window.outerWidth
window.inner : 브라우저 웹페이지 사이즈(스크롤 바 포함)
window.innerHeight / window.innerWidth
documentElement.client : 브라우저 웹페이지 사이즈(스크롤 바 제외)
document.documentElement.clientWidth / document.documentElement.clientHeight
document.documentElement : document를 제외한 DOM 트리 꼭대기에 있는 문서 노드인 <html>
mouse event 객체의 속성
clientX, clientY : 브라우저 창에서의 x, y 좌표
pageX, pageY : web page 문서 자체에서의 x, y 좌표
screenX, screenY : 화면 모니터에서의 x, y 좌표
window 객체 속성 중 scroll 관련 속성
window.scrollTo();
document의 입력한 좌표로 이동(scroll)한다.
window.scroll()도 동일하게 작용한다.
window.scrollTo(x, y)
window.scrollTo({ top: 100, left: 100, behavior: 'smooth' })window.scrollBy();
입력한 값만큼 document 창을 이동(scoll)한다.
window.scrollBy(x, y);
window.scrollBy({ top: 100, left: 100, behavior: 'smooth' });
window.scrollBy(0, window.innerHeight);
window.scrollBy(0, -window.innerHeight);element.scrollIntoView();
scrollIntoView()를 호출한 element가 있는 좌표로 이동(scoll)한다.
See the Pen mdrvZvr by Eunji Jeon (@emcjrl) on CodePen.
MDN window 객체 속성 / 메소드
https://developer.mozilla.org/en-US/docs/Web/API/Window
Window - Web APIs | MDN
The Window interface represents a window containing a DOM document; the document property points to the DOM document loaded in that window. A window for a given document can be obtained using the document.defaultView property. A global variable, window, re
developer.mozilla.org
'Web' 카테고리의 다른 글
| [Web] Call Stack - 자바스크립트의 콜 스택 (0) | 2021.02.02 |
|---|---|
| [Web] 프로세스와 스레드의 차이(Process vs Thread) (0) | 2021.02.01 |
| [Web] Rendering (DOM/CSSOM/Render Tree) (2) | 2021.01.20 |
| [Web] DOM요소 조작_Document.querySelector( ) (0) | 2021.01.20 |
| [Web] Web API (0) | 2021.01.18 |
