CODEWITHSUNDEEP
htmlcssreactjs
Roger Staxx
Roger Staxx

Reputation: 439

Horizontal scrollbar not working in react

I have a scroll__cotainer div like so:

<div className="scroll__container">
            <div onClick={setBlackTheme} className="skin__option">
              <p>Black</p>
            </div>
            <div onClick={setBlueTheme} className="skin__option">
              <p>Blue</p>
            </div>
            <div onClick={setRedTheme} className="skin__option">
              <p>Red</p>
            </div>
            <div onClick={setYellowTheme} className="skin__option">
              <p>Yellow</p>
            </div>
            <div onClick={setGreenTheme} className="skin__option">
              <p>Green</p>
            </div>
          </div>

However, when I apply the following css to the container, the horizontal scroll bar doesn't work:

.scroll__container {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  line-height: 0;
  -webkit-overflow-scrolling: touch;
  /* transform: translate3d(0, 0, 0);
  position: sticky; */
  cursor: grab;
}

I get these two weird looking grey bars where the scroll bar should be:

Pic of weird grey bars

What am I doing wrong?

Upvotes: 0

Views: 8510

Answers (1)

Ro Milton
Ro Milton

Reputation: 2536

The horizontal scroll can be achieved with even simpler CSS

.scroll__container {
  display: flex;
  overflow-x: auto;
}

Live demo

This uses the native horizontal scrolling when swiped on a touchscreen. It also works on a touchpad that supports horizontal scrolling.

If you want it to scroll when clicking down on the mouse button and dragging the cursor, there is no simple way to achieve this. You would need to implement mouse click and movement handlers using JavaScript, or use a 3rd party library like react-slick that does so.

By the way, the weird grey lines in your example are an empty scrollbar - it's because you used overflow-x: scroll; to force a scrollbar to display although the elements were not overflowing the container.

Upvotes: 2

Related Questions