您可以使用Intersection observer和一些钩子来实现这一点。例如，我有一个名为useInView（）的钩子，它使用IntersectionObserver对象，如果某个元素在视图中，则返回true，如果不在视图中，则返回false。
useInView（）挂接：

import React, { useState, useEffect } from 'react';
       
    const useInView = (element, rootMargin) => {
        const [isVisible, setIsVisible] = useState(false);
    
        useEffect(() => {
            const observer = new IntersectionObserver(
                ([entry]) => {
                    setIsVisible(entry.isIntersecting);
                },
                { rootMargin },
            );
            if (element.current) {
                observer.observe(element.current);
            }
    
            return () => observer.unobserve(element.current!);
        }, []);
        return isVisible;
    };
    
    export default useInView;

如何做到这一点：

• 首先，您需要一个useRef（）挂钩，将其连接到一个组件，当用户向下滚动到该组件时，您希望触发该计时器。
• 将ref对象作为参数传递给useInView（）挂钩，以便可以使用IntersectionObserver。
• 使用useState（）创建状态，以便可以在计时器完成时更改状态
• 创建useEffect（）并从isInView（）添加值作为依赖项，以便在组件处于视图中时触发副作用。
• 在有效挂钩中，设置一个超时，这样3秒后你就可以将状态设置为true
• 在满足条件时渲染组件

const componentRef = useRef(null);
    const isInView = useInView(componentRef, '0px');
    const [timerDone, setTimerDone] = useState(false);
    
    useEffect(() => {
       setTimeout(() => {
          setTimerDone(true);
       }, 3000);
    }, [isInView]);

    <div ref={componentRef}>
       { timerDone && <Component /> }
    </div>

// hooks
  const { ref: targetRef, inView: isVisible } = useInView();

const [countdown, setCountdown] = useState(3);

 useEffect(() => {

    let interval: any;
    // clearInterval(interval)

    if (isVisible && countdown === 0) {
      // @ts-ignore
      router.push(`/case-study/${parseInt(id) === 12 ? 1 : parseInt(id) + 1}`)
      setCountdown(3)
    }  
    
    if (isVisible) {
      interval = setInterval(() => {
        setCountdown(countdown - 1);
      }, 1000);
    } else {
      setCountdown(3)

    }

    return () => {
      clearInterval(interval);
    };

  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isVisible, countdown])

https://www.npmjs.com/package/react-intersection-observer
https://spacejelly.dev/posts/how-to-trigger-a-function-when-scrolling-to-an-element-in-react-intersection-observer/
示例和包在这里..试试看