使用ReactJS实现div元素滚动方向反转的问题求解

问题根因 #

React 16及以上版本默认对onWheel等滚动相关合成事件开启了passive: true配置，直接在合成事件回调中调用e.preventDefault()会被浏览器忽略，才会出现滚动冻结、效果不生效的问题，需要绑定原生wheel事件手动修改配置解决。

实现步骤 #

• 用useRef获取需要反转滚动的目标div的原生DOM实例
• 在useEffect钩子中给目标DOM绑定原生wheel事件监听器，显式配置passive: false允许阻止默认滚动行为
• 在事件回调中反转滚动增量值，直接修改容器的scrollTop实现滚动方向反转，同时阻止默认滚动行为
• 组件卸载时移除事件监听器，避免内存泄漏

完整代码示例 #

import { useRef, useEffect } from 'react';

const ReverseScrollContainer = () => {
  const scrollContainerRef = useRef(null);

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

    const handleReverseScroll = (e) => {
      // 阻止原生默认滚动行为
      e.preventDefault();
      // 反转滚动增量：原生deltaY向下为正，乘-1后实现向上滚内容下移、向下滚内容上移
      container.scrollTop += e.deltaY * -1;
      
      // 如需同时反转水平滚动方向，可添加以下代码
      // container.scrollLeft += e.deltaX * -1;
    };

    // 绑定原生wheel事件，必须设置passive: false才能正常调用preventDefault
    container.addEventListener('wheel', handleReverseScroll, { passive: false });

    return () => {
      // 组件卸载时清除事件监听
      container.removeEventListener('wheel', handleReverseScroll);
    };
  }, []);

  return (
    <div
      ref={scrollContainerRef}
      style={{
        width: '500px',
        height: '700px',
        overflow: 'auto',
        border: '1px solid #e5e7eb',
        // 如需平滑滚动可添加以下配置
        // scrollBehavior: 'smooth'
      }}
    >
      {/* 替换为你的实际内容 */}
      {Array.from({ length: 100 }).map((_, index) => (
        <p key={index} style={{ padding: '12px', margin: 0 }}>
          测试内容第 {index + 1} 行
        </p>
      ))}
    </div>
  );
};

export default ReverseScrollContainer;

适配优化提示 #

• 若需要适配不同输入设备的滚动灵敏度，可以给反转后的增量乘以自定义系数，比如e.deltaY * -1 * 0.8来调整滚动速度
• 仅在需要反转滚动的局部容器绑定事件，不要绑定到document等全局节点，避免影响页面其他区域的正常滚动行为

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