React实现滚动到指定区域触发3秒间隔倒计时方案咨询

核心实现步骤 #

• 监听滚动事件：在useEffect中添加全局滚动监听，实时检测滚动位置
• 判断可视区域：对比滚动位置与目标元素的位置，确定是否触发倒计时
• 管理倒计时状态：用状态控制倒计时数值和激活状态，避免重复触发
• 定时器逻辑：通过setInterval实现每秒递减，倒计时结束后清理定时器
• 样式还原效果：用CSS动画实现数字滚动/渐变的视觉效果

完整代码示例 #

import { useEffect, useState, useRef } from 'react';

const ScrollTriggerCountdown = () => {
  const textInput = useRef(null);
  const [countdown, setCountdown] = useState(3);
  const [isCountdownActive, setIsCountdownActive] = useState(false);

  // 监听滚动，判断是否触发倒计时
  useEffect(() => {
    const handleScroll = () => {
      if (!textInput.current || isCountdownActive) return;

      const elementTop = textInput.current.offsetTop;
      const viewportBottom = window.scrollY + window.innerHeight;
      
      // 当目标元素进入可视区域时激活倒计时
      if (viewportBottom >= elementTop) {
        setIsCountdownActive(true);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [textInput, isCountdownActive]);

  // 倒计时定时器逻辑
  useEffect(() => {
    let timer;
    if (isCountdownActive && countdown > 0) {
      timer = setInterval(() => {
        setCountdown(prev => prev - 1);
      }, 1000);
    } else if (countdown === 0) {
      // 倒计时结束后可执行自定义逻辑，比如跳转、显示内容
      setIsCountdownActive(false);
      // 如需重置倒计时，可添加 setCountdown(3);
    }

    return () => clearInterval(timer);
  }, [isCountdownActive, countdown]);

  return (
    <div>
      {/* 页面其他内容 */}
      <div style={{ height: '150vh' }}>滚动到底部查看倒计时</div>
      
      {/* 目标触发区域 */}
      <div ref={textInput} className="countdown-wrapper">
        {isCountdownActive ? (
          <span className="countdown-number">{countdown}</span>
        ) : (
          <p>即将触发倒计时...</p>
        )}
      </div>
    </div>
  );
};

export default ScrollTriggerCountdown;

CSS样式（模拟目标效果） #

.countdown-wrapper {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: sans-serif;
}

.countdown-number {
  font-size: 6rem;
  font-weight: 700;
  color: #000;
  animation: slideDown 1s ease-in-out forwards;
}

@keyframes slideDown {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

注意事项 #

• 防抖优化：滚动事件会频繁触发，可添加防抖函数减少性能消耗，比如用lodash.debounce包裹handleScroll
• 重复触发控制：如果需要支持多次滚动触发，可在倒计时结束后重置isCountdownActive和countdown状态
• 初始位置判断：页面加载时如果目标元素已经在可视区域，可直接触发倒计时，需在useEffect初始执行时添加判断逻辑

内容的提问来源于stack exchange，提问作者Soumik Ahammed