TIL - 수평 스크롤 문제 해결

문제

• 수평 스크롤을 휠로 처리하려는 시도에서 스크롤이 끊기는 문제가 발생함.
• 터치 스크롤에 대한 지원이 부족함.

시도한 해결 방안

1. 커스텀 훅 사용
   • 구현: useHorizontalScroll 커스텀 훅을 사용하여 휠 스크롤 이벤트를 수평 스크롤로 변환.
   • 문제점: 이벤트 요청이 많아서 스크롤이 끊기는 문제가 발생. 디바운싱을 적용했으나 여전히 불완전함.
2. Swiper 라이브러리 사용
   • 구현: Swiper 라이브러리를 사용하여 슬라이드와 수평 스크롤을 구현.
   • 해결:
     • Swiper의 mousewheel 모듈을 사용하여 휠 스크롤을 자연스럽게 처리.
     • freeMode 옵션을 통해 자유로운 스크롤과 슬라이드 이동을 구현.
     • 터치와 마우스 휠 모두 안정적으로 처리됨.
       
       

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.min.css';
import { FreeMode, Mousewheel } from 'swiper';

const DietsLog = () => {
  // ... 기타 코드 ...

  return (
    <>
      {/* ... 기타 코드 ... */}
      
      {foods && foods.length > 0 && (
        <Swiper
          slidesPerView="auto"
          spaceBetween={16}
          freeMode={true}
          mousewheel={true}
          modules={[FreeMode, Mousewheel]}
          className="mySwiper"
        >
          {foods.map((food) => (
            <SwiperSlide key={food.id} style={{ width: 'auto' }}>
              <Chip food={food} />
            </SwiperSlide>
          ))}
        </Swiper>
      )}
    </>
  );
};

export default DietsLog;

결론

• Swiper 라이브러리를 사용함으로써 수평 스크롤과 터치 스크롤 문제를 효과적으로 해결할 수 있었음.
• 커스텀 훅을 통한 해결 방법도 시도했으나, Swiper를 사용하여 더 매끄럽고 안정적인 성능을 얻을 수 있었음.