React组件替代jQuery scrollTop方案：滚动触发组件动画实现

嘿，这个需求太懂了！为了个滚动触发动画就拉整个jQuery进来，实在有点杀鸡用牛刀的感觉。下面给你几个适合React或者纯ES6的轻量方案，都是我平时做项目常用的：

完全不用任何库，自己写几行代码就能搞定核心逻辑——监听滚动事件，判断元素是否进入视口，然后给元素添带动画的CSS类。

在React里可以这么写：

import { useEffect, useRef } from 'react';

const AnimatedSection = ({ children }) => {
  const sectionRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      const element = sectionRef.current;
      if (!element) return;

      // 判断元素是否进入视口（顶部小于窗口高度，底部大于0）
      const rect = element.getBoundingClientRect();
      const isVisible = rect.top < window.innerHeight && rect.bottom > 0;

      if (isVisible) {
        element.classList.add('animate-in');
      }
    };

    // 初始化时先检查一次，避免页面加载时元素已经在视口
    handleScroll();
    window.addEventListener('scroll', handleScroll);
    
    // 记得清理监听
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return <div ref={sectionRef} className="section">{children}</div>;
};

然后CSS写动画：

.section {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.section.animate-in {
  opacity: 1;
  transform: translateY(0);
}

⚠️ 小提示：最好给scroll事件加个防抖，避免触发太频繁影响性能，比如用setTimeout包裹逻辑，延迟100ms左右。

如果不想自己写监听逻辑，可以用专门做滚动触发的React库，体积都很小，比jQuery轻太多：

react-intersection-observer #

这个是我最常用的，基于浏览器原生的Intersection Observer API，性能比scroll监听好很多（不会频繁触发）。用法超简单：

import { useInView } from 'react-intersection-observer';

const AnimatedSection = ({ children }) => {
  const [ref, inView] = useInView({
    threshold: 0.1, // 元素进入视口10%时触发
    triggerOnce: true, // 只触发一次动画
  });

  return (
    <div 
      ref={ref} 
      className={`section ${inView ? 'animate-in' : ''}`}
    >
      {children}
    </div>
  );
};

不用自己管scroll监听，库已经帮你处理好了，还支持自定义触发阈值、是否重复触发等配置。

react-scroll-trigger #

另一个专门做滚动触发的库，支持更多滚动相关的回调（比如开始滚动、结束滚动、元素进入/离开视口），适合需要更复杂逻辑的场景。

如果你的项目不需要兼容太老的浏览器，可以试试CSS的scroll-timeline特性，完全不用JS就能实现滚动触发的动画：

/* 定义滚动时间线 */
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.section {
  animation: slideUp 0.6s ease-out;
  animation-timeline: scroll(root);
  animation-range: entry 0% entry 100%;
}

这个是纯CSS实现，性能最优，但要注意兼容性（目前Chrome、Edge支持较好，Safari需要开启实验特性）。

最后几个小建议 #

• 优先用Intersection Observer相关的方案，比scroll监听性能更好，尤其是页面元素多的时候；
• 动画尽量用CSS过渡/关键帧，比JS直接操作样式更流畅；
• 如果是纯ES6项目（非React），逻辑和方案1类似，只是把React的hooks换成原生的DOM操作和事件监听就行。

内容的提问来源于stack exchange，提问作者Ahmed Maher