코드 노트

오호 ? 하는 코드 기록장 🧐

 

1. 마우스 휠 스크롤 (React)

// DOM 제어를 위해 useRef 사용
const elRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const el = elRef.current;
    if (el) {
      const onWheel = (e: any) => {
        if (e.deltaY == 0) return;
        e.preventDefault();
        el.scrollTo({
          left: el.scrollLeft - e.deltaY,
          behavior: 'smooth',
        });
      };
      el.addEventListener('wheel', onWheel);
      return () => el.removeEventListener('wheel', onWheel);
    }
  }, [elRef]);

📌  `left: el.scrollLeft - e.deltaY`  → 이 경우,
       - 위로 스크롤 = 왼쪽으로 이동
       - 아래로 스크롤 = 오른쪽으로 이동

의 조건을 반영함 !

따라서, 반대의 조건으로는  left: el.scrollLeft + e.deltaY 을 적용하면 된다.

 

✅ TO DO :  onWheel event 안의 e 객체에 속한 해당 값들을 콘솔로 정확하게 확인해서 계산해보기 ✨