How to do a reactjs horizontal scroll webpage

I’m building a React.js Webpage, built with Vite and using Tailwind. I want the page to scroll horizontal. I’ve tried some react libraries like npm react-horizontal-scroll and others but nothing works and I don't know how to do it.

I want the page to scrolls everything horizontal with the mouse wheel and with a scrolling bar, except the header and the footer that will be static.

To make your Reactjs website scroll horizontally, built with Vite and using Tailwind, you need to set some CSS properties and also add some scroll events.

1 - Set a container that wraps all the content you want to horizontally scroll. Set its "overflow-x" property to "scroll" to allow the content to be horizontally scrolled. For example:

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

2 - Make sure the content inside the container is set to the necessary full width. You can do this by setting the width of the inner items to "100vw". For example:

.item {
  width: 100vw;
}

3 - Add a scroll event to the container to allow it to scroll with the mouse wheel. You can do this using the "onWheel" property on the container element. For example:

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 - Add a scrollbar to allow users to navigate through the scrollable content. You can do this using the "::-webkit-scrollbar" element and setting its properties. For example:

.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;
}

Make sure the "container" class includes the scrollbar.