Tailwind CSS中overflow-scroll横向滚动鼠标滚轮无法触发问题求助

解决方案 #

1. 明确容器滚动方向

你当前使用的overflow-scroll类会同时允许水平和垂直方向滚动，建议先明确设置为仅水平可滚动，避免垂直滚动事件冲突：
将外层容器的类修改为 overflow-x-scroll overflow-y-hidden，同时可添加touch-pan-x适配移动端触摸滑动，添加scroll-smooth实现平滑滚动效果。

2. 添加滚轮事件处理逻辑

浏览器默认行为中，鼠标滚轮的垂直滚动量仅会触发垂直方向滚动，只有按住Shift键滚动时才会触发水平滚动。要实现直接滚动滚轮控制横向滚动，需要手动绑定onWheel事件处理：
首先定义事件处理函数：

const handleWheel = (e) => {
  // 阻止默认滚动行为，避免同时触发页面垂直滚动
  e.preventDefault();
  // 将垂直滚动偏移量赋值给水平滚动位置
  e.currentTarget.scrollLeft += e.deltaY;
}

修改后的外层容器完整代码：

<div 
  className="flex space-x-3 overflow-x-scroll overflow-y-hidden p-3 -ml-3 touch-pan-x scroll-smooth"
  onWheel={handleWheel}
>
  {cardsData?.map(({ img, title }) => (
    <MediumCard key={img} img={img} title={title} />
  ))}
</div>

3. 可选适配调整

如果不需要阻止页面垂直滚动，仅在容器滚动到边缘时才触发页面滚动，可以调整事件逻辑如下：

const handleWheel = (e) => {
  const container = e.currentTarget;
  const isScrollAtStart = container.scrollLeft === 0;
  const isScrollAtEnd = container.scrollLeft + container.clientWidth >= container.scrollWidth;
  
  // 只有在容器可滚动时才拦截默认行为
  if (!(e.deltaY < 0 && isScrollAtStart) && !(e.deltaY > 0 && isScrollAtEnd)) {
    e.preventDefault();
    container.scrollLeft += e.deltaY;
  }
}

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