React中如何仅在滚动时添加/移除CSS类优化滚动性能？

我之前也碰到过类似的场景，带hover动画的卡片在滚动时确实容易拖慢流畅度，用滚动时临时禁用指针事件的方案是个高效的解决思路。下面是具体的React实现方法：

1. 编写控制pointer-events的CSS类 #

先定义一个用于禁用子元素指针事件的类，滚动时给卡片的父容器加上它：

/* 滚动时禁用所有子元素的指针事件 */
.scroll-disable-pointer-events > * {
  pointer-events: none;
  /* 可选：临时移除过渡动画，进一步减少性能开销 */
  transition: none !important;
}

用>*子选择器是为了精准作用于卡片，不会影响父容器本身的交互（比如父容器上的筛选按钮等）。

2. React组件中实现滚动状态监听与类切换 #

以下是函数组件的实现方案（基于Hooks），类组件思路类似，只需把状态换成this.state即可：

import { useState, useEffect } from 'react';

const Dashboard = () => {
  const [isScrolling, setIsScrolling] = useState(false);
  let scrollTimer = null;

  useEffect(() => {
    // 滚动开始时标记滚动状态
    const handleScrollStart = () => {
      if (scrollTimer) clearTimeout(scrollTimer);
      setIsScrolling(true);
    };

    // 滚动停止后延迟恢复交互（防抖处理）
    const handleScrollEnd = () => {
      scrollTimer = setTimeout(() => {
        setIsScrolling(false);
      }, 150); // 150ms是合理延迟，可根据需求调整
    };

    // 绑定滚动事件
    const handleScroll = () => {
      handleScrollStart();
      handleScrollEnd();
    };

    window.addEventListener('scroll', handleScroll);

    // 组件卸载时清理监听器和定时器，避免内存泄漏
    return () => {
      window.removeEventListener('scroll', handleScroll);
      if (scrollTimer) clearTimeout(scrollTimer);
    };
  }, []);

  return (
    {/* 给卡片网格父容器添加条件类 */}
    <div className={`article-grid ${isScrolling ? 'scroll-disable-pointer-events' : ''}`}>
      {/* 渲染你的400×400文章卡片 */}
      {articles.map(article => (
        <ArticleCard key={article.id} article={article} />
      ))}
    </div>
  );
};

export default Dashboard;

关键细节说明 #

• 防抖处理：用setTimeout延迟恢复isScrolling状态，是因为滚动事件会高频触发（每秒几十次），延迟150ms既能保证滚动停止后快速恢复交互，又能避免状态频繁切换导致的性能浪费。
• 事件清理：组件卸载时必须移除滚动监听器并清除定时器，防止内存泄漏。
• 性能逻辑：滚动时禁用pointer-events，浏览器会忽略卡片的所有鼠标事件，不再计算hover动画的重排重绘，直接降低滚动时的性能开销，解决卡顿问题。

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