如何在React+Tailwind CSS项目中实现鼠标滚轮横向滚动功能

直接按照以下步骤修改代码即可实现需求：

完整实现代码 #

import { useRef } from 'react';

// 你的业务组件
const LiveAnywhereCardSection = () => {
  // 定义ref获取滚动容器DOM实例
  const cardContainerRef = useRef(null);

  // 滚轮事件处理逻辑：将纵向滚动偏移量直接转换为横向滚动距离
  const handleWheel = (e) => {
    e.preventDefault();
    cardContainerRef.current.scrollLeft += e.deltaY;
  };

  return (
    <section>
      <div 
        ref={cardContainerRef}
        onWheel={handleWheel}
        {/* 修正溢出属性，追加scroll-smooth实现顺滑滚动，不需要可删除 */}
        className="flex space-x-3 overflow-x-scroll overflow-y-hidden scrollbar-hide scroll-smooth p-3 -ml-3"
      >
        {cardsDate?.map(({ img, title }) => (
          <MediumCard key={img} img={img} title={title} /> 
        ))}
      </div>
    </section>
  )
}

说明 #

• 原代码中的overflow-y-scroll不符合横向滚动需求，已修正为overflow-x-scroll overflow-y-hidden
• 不需要修改原有组件的其他逻辑，仅需调整容器属性、绑定事件即可实现PC端悬浮后直接滚动滚轮横向滑动卡片的效果

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