基于Vite+Tailwind的React.js横向滚动网页实现求助

不需要依赖第三方库，用原生CSS和React事件就能实现需求，以下是具体方案：

核心思路 #

1. 用Tailwind固定定位将页眉、页脚钉在屏幕上下，避免随内容滚动
2. 给主体内容容器设置横向溢出滚动，内部内容横向排列
3. 监听鼠标滚轮事件，将纵向滚动转为横向滚动

完整代码实现 #

import { useEffect, useRef } from 'react';

function App() {
  const scrollContainerRef = useRef(null);

  // 处理鼠标滚轮横向滚动逻辑
  useEffect(() => {
    const handleWheel = (event) => {
      if (!scrollContainerRef.current) return;
      
      // 阻止默认纵向滚动行为
      event.preventDefault();
      // 把滚轮的纵向偏移量转为横向滚动距离
      scrollContainerRef.current.scrollLeft += event.deltaY;
    };

    const container = scrollContainerRef.current;
    container?.addEventListener('wheel', handleWheel);

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

  return (
    <div className="min-h-screen flex flex-col">
      {/* 固定页眉 */}
      <header className="fixed top-0 left-0 right-0 h-16 bg-white shadow-md z-50">
        <div className="container mx-auto h-full flex items-center justify-center">
          <h1 className="text-xl font-bold">固定页眉</h1>
        </div>
      </header>

      {/* 主体内容区 - 预留页眉页脚高度避免遮挡 */}
      <main className="flex-1 pt-16 pb-16">
        {/* 横向滚动容器 */}
        <div
          ref={scrollContainerRef}
          className="overflow-x-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100"
          style={{ scrollbarWidth: 'thin' }} // 兼容Firefox
        >
          {/* 横向内容容器 - 宽度超出视口才会触发横向滚动 */}
          <div className="flex h-full p-8">
            {/* 示例内容块，可替换为你的实际内容 */}
            <div className="w-96 h-64 bg-blue-100 rounded-lg m-4 flex items-center justify-center">内容块1</div>
            <div className="w-96 h-64 bg-green-100 rounded-lg m-4 flex items-center justify-center">内容块2</div>
            <div className="w-96 h-64 bg-yellow-100 rounded-lg m-4 flex items-center justify-center">内容块3</div>
            <div className="w-96 h-64 bg-red-100 rounded-lg m-4 flex items-center justify-center">内容块4</div>
            <div className="w-96 h-64 bg-purple-100 rounded-lg m-4 flex items-center justify-center">内容块5</div>
          </div>
        </div>
      </main>

      {/* 固定页脚 */}
      <footer className="fixed bottom-0 left-0 right-0 h-16 bg-white shadow-md z-50">
        <div className="container mx-auto h-full flex items-center justify-center">
          <p className="text-gray-600">固定页脚</p>
        </div>
      </footer>
    </div>
  );
}

export default App;

关键细节说明 #

• 固定定位布局：页眉、页脚使用fixed+top-0/bottom-0锁定位置，z-50确保不会被内容遮挡；主体区域用pt-16/pb-16预留出页眉页脚的高度。
• 横向滚动容器：overflow-x:auto让容器在内容超出时自动显示横向滚动条；如果需要自定义滚动条样式，可使用tailwind-scrollbar插件（见下方配置）。
• 鼠标滚轮适配：通过wheel事件监听，将滚轮的纵向偏移量deltaY转为横向滚动的scrollLeft值，实现滚轮控制横向滚动。
• 内容宽度控制：内部横向内容容器无需硬写固定宽度，只要子元素总宽度超过视口宽度，就会自动触发横向滚动；示例中用固定宽度的内容块演示效果。

自定义滚动条样式（可选） #

如果觉得默认滚动条不够美观，可通过tailwind-scrollbar插件自定义：

1. 安装插件：

npm install tailwind-scrollbar --save-dev

2. 在tailwind.config.js中配置：

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [require('tailwind-scrollbar')],
}

内容的提问来源于stack exchange，提问作者Marc Puig López