<Web> TIL: 사이즈, 좌표, 스크롤

 

🐣

 

브라우저의 크기 측정

// 모니터 크기 가로, 세로
window.screen.width, window.screen.height

// 브라우저 창 전체 폭, 높이
window.outerWidth, window.outerHeight

// 브라우저 창 내부 폭, 높이 (작업표시줄 제외됨)
window.innerWidth, window.innerHeight

// 브라우저 창 내부 폭, 높이 (작업표시줄, 스크롤 부분 제외됨, 실제 눈에 보이는 부분만 측정)
document.documentElement.clientWidth, document.documentElement.clientHeight

 

브라우저의 좌표 다루기

clientX/Y: 브라우저 창 내부 보이는 부분 기준으로 측정

pageX/Y: 스크롤이 여부랑 상관없이 페이지의 맨 처음 위치를 기준으로 측정

const screen = document.querySelector('.screen');
document.addEventListener('mousemove', function logKey(e) {
  screen.innerText = `
  Client X/Y: ${e.clientX}, ${e.clientY}
  Page X/Y: ${e.pageX}, ${e.pageY}
  `;
});

 

스크롤 다루기

window.scrollBy()

주어진 수치만큼 스크롤

window.scrollTo()

주어진 수치로 스크롤

element.scrollIntoView()

대상 위치로 스크롤

window.scrollBy({ top: 100, left: 100, behavior: 'smooth' });
window.scrollTo( x-coord, y-coord );
element.scrollIntoView({ behavior: "smooth", block: "end" });

매개변수로 behavior, block 등의 옵션값을 줄 수 있다.