31. 스크롤 이벤트 (window.scrollTo)

스크롤 이벤트 : window.scroll

• sticky 버튼을 클릭하면 화면의 최상단 / 최하단으로 스크롤
• 각각의 Icon에 다음의 클릭 이벤트를 넣었다.
• window.scroll을 사용해서 구현했다.

//Layouts.tsx
<StickyIcon>
        <UpIcon
          onClick={() => {
            window.scrollTo({ top: 0, behavior: 'smooth' });
          }}
        />
        <DownIcon
          onClick={() => {
             window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
          }}
        />
      
</StickyIcon>

끝까지 스크롤 : scrollHeight

• 컨텐츠 끝까지 스크롤하기 위해서는 scrollHeight 속성을 이용했다. 해당 속성은 요소 콘텐츠의 총 높이를 나타내며, 바깥으로 넘쳐서 보이지 않는 콘텐츠도 포함한다.

window 객체 속성 정리

화면 사이즈

• window size

  • screen : 모니터 사이즈
    • window.screen.width , window.screen.height
  • outer : 브라우저 사이즈
    • window.outerWidth, window. outerHeight
  • inner : 브라우저 사이즈 (화면 부분만 + 스크롤바 포함)
    • window.innerWidth, window. innerHeight

• document size

  • documentElement : 브라우저 사이즈 (화면 부분만 + 스크롤바 제외)
    • document.documentElement.clientWidth, document.documentElement.clientHeight

좌표

• clientX, clienY : (브라우저창 기준) xy 좌표
• pageX, pageY : (웹 문서 기준) xy 좌표
• screenX, screenY : (화면 모니터 기준) xy 좌표

scroll

• window.scrollTo() : 해당 좌표로 이동
• window.scrollBy() : 해당 좌표만큼 document 창을 이동
• element.scrollIntoView() : 해당 기능을 호출한 element가 있는 좌표로 이동