[motion] motion/react를 활용한 스크롤 검사 예시 코드

import { useScroll } from 'framer-motion';
import { useState, useEffect } from 'react';

// 블로그용 스크롤 감지 훅
const ExampleComponent = () => {
  const { scrollY } = useScroll();
  const [isScrolling, setIsScrolling] = useState(false);

  useEffect(() => {
    const unsubscribe = scrollY.on("change", () => {
      setIsScrolling(true);
      setTimeout(() => setIsScrolling(false), 150);
    });
    return unsubscribe;
  }, [scrollY]);

  return (
    <div>
      {isScrolling ? "스크롤 중" : "스크롤 멈춤"}
    </div>
  );
};

export default ExampleComponent;