프론트엔드/javascript
Web APIs - window size & browser coordinate & scroll
느바
2022. 4. 6. 17:14
반응형
Web APIs - window size & browser coordinate & scroll
Web API 중 유용한 기능(사이즈, 좌표, 스크롤) 세 가지를 정리해 본다.
1. window size
window.screen.width // 모니터 사이즈
window.outerWidth //브라우저 사이즈(주소창, 탭 포함)
window.innerWidth // 페이지 사이즈
document.documentElement.clientWidth // 문서 사이즈(스크롤바 제외한 영역)
window가 resize 될 때마다
window.outer, window.inner, documentElement.clientWidth 값이 업데이트 된다.
2. browser coordinate
element.getBoundingClientRect();
/*
{
"x":8,
"y":0,
"width":150,
"height":150,
"top":0,
"right":158,
"bottom":150,
"left":8
}
*/
button.addEventListener('click', event => {
console.log(`${event.clientX} ${event.pageX}`);
});
① getBoundingClientRect
② clientX - 브라우저에서 얼마나 떨어져 있는지
③ pageX - 페이지 시작점에서 얼마나 떨어져 있는지
3. scroll
window.scrollBy({left:0, top:100,behavior:'smooth'});
window.scrollTo({left:0,top:100,behavior:'smooth'});
special.scrollIntoView({behavior:'smooth'});