[React] 스무스한 가로스크롤 버튼

#왜 스크롤 버튼이 필요한가

데스크탑 가로스크롤이 필요한 UI에서 가로스크롤이 있다는 것을 알려주기 위함과 사용자 편의성을 위하여 스크롤 버튼을 사용한다.

이를 구현해보고자 하였을 때 x-overflow: scroll;인 태그안에서 현재 x위치값을 파악하여 원하는 만큼 이동할 수 있었으면 하였다.

useRef로 엘리멘트를 가져와 함수를 동작하게 하는 방향으로 구현해야겠다고 생각했다.

#구현

  const handleNextButtonClick = (nextType: 'prev' | 'next') => {
    if (!horizontalScrollRef.current) return;
      if (nextType === 'prev') {
        horizontalScrollRef.current.scrollTo({
          left: horizontalScrollRef.current.scrollLeft - horizontalScrollRef.current.offsetWidth,
          behavior: 'smooth',
        });
      } else {
        horizontalScrollRef.current.scrollTo({
          left: horizontalScrollRef.current.scrollLeft + horizontalScrollRef.current.offsetWidth,
          behavior: 'smooth',
        });
      }
  };

화살표 버튼의 동작 함수이다.

가로스크롤 버튼 동작 예시