브라우저 화면 관련

1. 창의 너비와 높이

1. window.innerWidth
   window.innerHeight
2. document.documentElement.clientWidth
   document.documentElement.clientHeight

• window 객체가 아닌 document.documentElement를 쓰는 이유

  window 객체는 스크롤바가 차지하는 부분까지 합쳐서 계산하고
  document.documentElement는 스크롤바가 차지하는 부분은 제외한다.

2. 스크롤에 의해 가려진 영역을 포함한 문서 전체의 너비와 높이

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

3. 현재 스크롤 정보 읽기

window.pageYOffset/pageXOffset
Window.scrollX / scrollY

4. 스크롤 상태 변경시키기

1. window.scrollTo(pageX,pageY) – 절대 좌표
2. window.scrollBy(x,y) – 현재 스크롤 상태를 기준으로 상대적으로 스크롤 정보 변경
3. elem.scrollIntoView(top) – elem이 눈에 보이도록 스크롤 상태 변경(인수에 따라 창 최상단, 최하단에 해당 요소가 노출되도록 처리)

1번은 화면에 가려진 것을 포함한 문서 전체에서 정확한 위치를 가고
2번은 현재 스크롤 기준에서 옮기는 것이고
3번은 해당 대상(element)을 최상단 혹은 최하단에 노출시킨다.

적용하기

맨 마지막 위치에 갔을 때
window.innerHeight + window.scrollY === document.body.offsetHeight
창넓이 + scroll한 양 === document가 가지는 Height와 같다

출처

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