Web APIs - window size & browser coordinate & scroll

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'});