如何在React中为元素设置自定义鼠标滚轮滚动速度？

要实现鼠标滚轮滚动时的自定义速度和平滑效果，原生scroll-behavior仅支持点击触发的过渡，无法满足滚轮场景需求，需要通过监听wheel事件手动控制滚动逻辑。以下是具体实现方案：

import { useContext, useRef, useEffect } from 'react';
import { Container } from '@mui/material';
import { ThemeContext } from './your-theme-context-path'; // 替换为你的ThemeContext实际路径
import AnimatedPage from './your-animated-page-path'; // 替换为AnimatedPage组件实际路径

function Projects() {
  const { theme } = useContext(ThemeContext);
  const scrollContainerRef = useRef(null);
  // 自定义滚动速度系数，数值越小滚动越慢，建议范围0.1-0.5
  const scrollSpeed = 0.3;

  useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const handleWheel = (e) => {
      // 阻止原生滚动行为，避免与自定义逻辑冲突
      e.preventDefault();
      // 计算滚动距离，乘以自定义速度系数
      const scrollDistance = e.deltaY * scrollSpeed;
      // 用requestAnimationFrame实现平滑滚动动画
      requestAnimationFrame(() => {
        container.scrollTop += scrollDistance;
      });
    };

    container.addEventListener('wheel', handleWheel, { passive: false });
    // 组件卸载时移除事件监听，防止内存泄漏
    return () => {
      container.removeEventListener('wheel', handleWheel);
    };
  }, [scrollSpeed]);

  return (
    <AnimatedPage>
      <Container
        className="projectsCont"
        sx={{
          display: 'flex',
          overflowY: 'auto',
          // 可选：隐藏原生滚动条优化视觉
          scrollbarWidth: 'none',
          '&::-webkit-scrollbar': { display: 'none' }
        }}
        ref={scrollContainerRef}
      >
        {Array.from({ length: 10 }, (_, i) => (
          <a
            key={i}
            href="***"
            className={`projectsLink ${theme === 'dark' ? 'darkText' : 'lightText'}`}
            target="_blank"
            rel="noopener noreferrer" // 补充安全属性
          >
            Sample Text
          </a>
        ))}
      </Container>
    </AnimatedPage>
  );
}

export default Projects;

核心逻辑说明： #

• 速度控制：通过scrollSpeed系数直接调整滚轮滚动的速率，数值越小滚动越平缓
• 平滑动画：利用requestAnimationFrame让滚动操作与浏览器刷新帧率同步，避免卡顿
• 事件处理：设置passive: false确保能成功阻止原生滚动，保证自定义逻辑生效
• 内存管理：组件卸载时移除事件监听，避免不必要的资源占用

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