如何实现React组件鼠标滚轮无需按SHIFT即可横向滚动

可以实现，目前有两种常用方案，分别是纯CSS实现和React事件监听实现，均无需引入额外依赖。

适合布局简单、尺寸固定的横向图片列表场景，无JS逻辑，性能最优。实现原理是通过旋转容器将垂直滚动事件映射为横向滚动，再将内容旋转回正常显示方向。

/* 滚动外层容器 */
.horizontal-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  transform: rotate(-90deg) translateY(-100%);
  transform-origin: top left;
  /* 高度等于你需要的列表宽度，可根据实际需求调整 */
  height: 600px;
}

/* 内容容器 */
.horizontal-scroll-content {
  display: flex;
  gap: 16px;
  transform: rotate(90deg) translateX(-100%);
  transform-origin: top left;
  width: fit-content;
}

优缺点：

• 优点：零JS代码，运行性能最高，适配所有支持CSS transform的浏览器
• 缺点：需要额外适配容器宽高，复杂布局下容易出现位置偏移，不适合嵌套在复杂页面结构的场景

适配所有布局场景，灵活性最高，可自定义滚动速度、滚动阻尼等交互细节。实现原理是监听容器的滚轮事件，将默认的垂直滚动偏移量直接转为横向滚动偏移量。

import { useRef } from 'react';

const HorizontalImageList = ({ imageList }) => {
  const scrollContainerRef = useRef(null);

  const handleWheelScroll = (e) => {
    // 阻止默认垂直滚动行为
    e.preventDefault();
    // 将垂直滚动量转换为横向滚动量，1.5为滚动速度系数，可根据需求调整
    scrollContainerRef.current.scrollLeft += e.deltaY * 1.5;
  };

  return (
    <div
      ref={scrollContainerRef}
      onWheel={handleWheelScroll}
      style={{
        display: 'flex',
        overflowX: 'auto',
        overflowY: 'hidden',
        gap: '12px',
        padding: '16px 0',
        /* 可选配置：隐藏滚动条 */
        scrollbarWidth: 'none',
      }}
    >
      {imageList.map((item, index) => (
        <img
          key={index}
          src={item.src}
          alt={item.alt}
          style={{ height: '200px', width: 'auto', borderRadius: '4px' }}
        />
      ))}
    </div>
  );
};

export default HorizontalImageList;

注意事项：

• 如果需要保留系统滚动条，删除scrollbarWidth: 'none'配置即可，也可以通过CSS自定义滚动条样式
• 滚动速度可通过调整e.deltaY的乘积系数控制，系数越大滚动速度越快

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