브라우저 창 사이즈와 스크롤 정보 얻기

목차

1. 브라우저 창 사이즈

2. 스크롤 정보 얻기

3. 00

---

1. 브라우저 창 사이즈

브라우저 창의 사이즈(width, height)를 구할 수 있다.

• documentElement.clientHeight
• documentElement.clientWidth

<button onclick="alert(document.documentElement.clientHeight)">
  alert(document.documentElement.clientHeight)
</button>

 

 

window.innerWidth, window.innerHeight로 창 크기를 구할 수도 있으나,

window는 스크롤바 공간까지 포함된 크기를 구한다.

 

이 부분 차이를 인지하고 필요에 따라 documentElement나 window를 사용하면 된다.

 

---

2. 스크롤 정보 얻기

DOM 요소의 현재 스크롤 상태(스크롤에 의해 가려진 영역에 대한 정보)는 scrollLeft, scrollTop 프로퍼티로 구할 수 있다.

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

위와같이 작성하면 스크롤에 의해 가려진 영역을 포함한 문서 전체의 너비와 높이를 알 수 있다.

 

 

 

 

 

 

참고

https://ko.javascript.info/size-and-scroll-window

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