React 썸네일 리스트 스크롤 step 세팅

썸네일 리스트에서 스크롤 할때
각 아이템의 위치는 고정되고 이미지만 변경될 수 있도록
스크롤 높이 = 아이템 높이로 지정해주었다.
이렇게하면 연속된 이미지의 변화를 영상처럼 확인할 수 있다.
여러 시행착오 후에 구현!

  let ulRef;
  let lastPos = 0;
 
  useEffect(() => {
    const ref = ulRef;
    ref.addEventListener('wheel', handleScroll);
    return () => {
      ref.removeEventListener('wheel', handleScroll);
    };
  }, []);

  const handleScroll = (e) => {
    e.preventDefault();

    const el = document.getElementsByClassName('thumb_ul')[0];
    // default height = 400
    const h =
      document.getElementsByClassName('thumb_item')[0]?.clientHeight || 400; 
    const pos = el.scrollTop;
    const deltaY = e.deltaY < 0 ? -1 : 1;
    const nextPos = pos + h * deltaY;

    lastPos = pos;
    el.scrollTo(0, nextPos);
  };
  
  
  <ul className="thumb_ul" ref={(el) => (ulRef = el)}>
    // ...<li className="thumb_item"></li>
  </ul>

https://stackoverflow.com/questions/18564561/how-to-specify-how-many-pixels-scroll-moves-on-each-step
https://stackoverflow.com/questions/24217087/how-to-determine-scroll-direction-without-actually-scrolling
https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event