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

random-olive·2023년 3월 23일
0

스크롤 이벤트 : 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가 있는 좌표로 이동
profile
Doubts kills more dreams than failure ever will

0개의 댓글