[ JS ] 브라우저 창 사이즈와 스크롤

브라우저 창 사이즈

  JS에서 브라우저 창의 너비와 높이를 얻기 위해서는 document.documentElement.clientHeight와 같이 window가 아닌 document.documentElement를 사용합니다. 그 이유는 window.innerHeight와 같은 방식이 스크롤바를 차지하는 영역을 고려하지 않기 때문입니다.

• window.inner... : 전체 창 너비
• document.documentElement.client... : 전체 창 너비 중 스크롤바가 차지한 영역을 제외한 너비

 

  문서 전체의 크기(가려져 있는 부분까지)를 구할 경우에 아래와 같이 구해야합니다. 그 이유는 아주 오래전부터 논리적이지 않은 방식이로 이어져온 것이기에 알아볼 필요가 없으니 그냥 받아들이시면 됩니다.

 

let scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

 

스크롤 정보

  스크롤 정보는 scrollLeft, scrollTop으로 계산 가능하지만 브라우저간 호환성을 고려했을 때 window객체의 pageXOffset, pageYOffset을 사용하는게 추천됩니다. 이 두 프로퍼티는 모두 scrollLeft, scrollTop과 유사하게 스크롤링에 의해 가려진 영역의 크기를 반환합니다.

 

스크롤 상태 변경

• window.scrollBy(x, y) : 인자로 주어진 값만큼 현재 위치에서 상대적으로 변경
• window.scrollTo(x, y) :  절대 좌표를 기준으로 페이지 스크롤 상태를 변경, 즉, 문서 전체의 왼쪽 위 모서리를 기준으로 인자로 주어진 (x, y)  좌표로 변
• element.scrollintoView() : 이 메서드를 호출하면 페이지 스크롤이 움직여 대상 element가 눈에 보이도록 조정됩니다. 인수의 기본값은 true인데 이 경우 element가 창 상단 부분에 위치하며 false일 경우 창 하단에 위치합니다.
• 스크롤을 막고 싶다면 document.body.style.overflow를 hitdden으로 설정합니다. 이때 스크롤바가 삭제되며 발생하는 너비의 변경은 padding을 스크롤바와 동일한 크기로 주어 막을 수 있습니다.