How to do a reactjs horizontal scroll webpage

Question

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.

Answer 1

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.