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

• document.documentElement.clientWidth/clientHeight : 컨텐트가 실제 보여지는 영역의 너비와 높이

• window 객체는 스크롤바 공간 포함

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

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

• 스크롤 관련 프로퍼티

  window.pageYOffset/pageXoffset : 현재 스크롤 정보 읽기

  document.body.style.overflow = “hidden” : 스크롤바 고정됨 (스크롤바가 사라지기 때문에 스크롤바 차지한 영역만큼 document.body 에 padding 줘서 컨텐츠 전체 보정 필요)

  • 스크롤 상태 변경시키기

    window.scrollTo(pageX, pageY) : 절대 좌표기준으로 변경

    window.scrollBy(x, y) : 현재 스크롤 상태 기준으로 상태적으로 스크롤 정보 변경

    elem.scrollIntoView(top) : elem 이 눈에 보이도록 스크롤 상태 변경(인수에 따라 창 최상단, 최사단에 요소 노출되\도록 처리)