如何制作一个ReactJS水平滚动网页。

Question

我正在构建一个使用Vite和Tailwind构建的React.js网页。 我想让页面水平滚动。我尝试了一些React库，如npm react-horizontal-scroll等，但都没有起作用，我不知道该怎么做。

我希望页面可以通过鼠标滚轮和滚动条水平滚动所有内容，除了页眉和页脚将保持静态。

- Marc Puig López

Answer 1

为了使你使用Vite和Tailwind构建的Reactjs网站可以水平滚动，你需要设置一些CSS属性并添加一些滚动事件。

1- 设置一个容器来包裹所有你想要水平滚动的内容。将其"overflow-x"属性设置为"scroll"以允许内容水平滚动。例如：

.container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
}

2 - 确保容器内的内容设置为必要的全宽。您可以通过将内部项目的宽度设置为“100vw”来实现此目的。例如：

.item {
  width: 100vw;
}

3 - 给容器添加滚动事件，使其可以通过鼠标滚轮进行滚动。您可以使用容器元素上的“onWheel”属性来实现此操作。例如：

import React from 'react';

function App() {
  const handleScroll = (event) => {
    const container = event.target;
    const scrollAmount = event.deltaY;
    container.scrollTo({
      top: 0,
      left: container.scrollLeft + scrollAmount,
      behavior: 'smooth'
    });
  };

  return (
    <div>
      <header>
        {/* Header content */}
      </header>
      <div className="container" onWheel={handleScroll}>
        <div className="item">
          {/* Item content */}
        </div>
        <div className="item">
          {/* Item content */}
        </div>
        <div className="item">
          {/* Item content */}
        </div>
      </div>
      <footer>
        {/* Footer content */}
      </footer>
    </div>
  );
}

4 - 添加滚动条以允许用户浏览可滚动内容。您可以使用“::-webkit-scrollbar”元素并设置其属性来实现此操作。例如：

.container::-webkit-scrollbar {
  height: 8px;
}

.container::-webkit-scrollbar-thumb {
  background-color: gray;
  border-radius: 10px;
}

.container::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 10px;
}

确保“container”类包括滚动条。

- Jônatas Alves

---

嗨！谢谢你的回答，除了用鼠标滚动的功能之外，一切都正常，我正在尝试重写这个函数，看看是否有效。 - Marc Puig López

对于这种情况，可以使用event.target.parentElement来解决，但这个解决方案仍然会导致垂直滚动。 - undefined