Horizontal Scrolling is not working

[Neno-N]

Hi!

So I’m trying to make a page where when the user scrolls it scrolls horizontally (it’s not a big page) and it has a video-scroller (so videos in a container where

.video-container {
     display: flex;
     flex-direction: row;

     overflow-x: auto;
}

).

The container has an overflow in the x direction. That is why I added overflow-x.

The Problem:
There is a horizontal scrollbar but when I scroll on my mouse it does not move horizontally. I want it so that when the user scrolls the web page moves left to right.

I’ve tried

.video-container {
     overflow-x: scroll;
     overflow-y: hidden;
}

I’ve even tried putting the overflow on my body element and nothing seems to be working.

Any help will be appreciated!

[lasjorg]

You have to add JS for the mouse wheel. If you search for it you should find a bunch of articles.

https://www.google.com/search?q=horizontal+overflow+scroll+mouse+scroll

It should be said that many consider it bad UX as you are in effect hijacking the mouse wheel input.

---

You can do it in pure CSS but that is pretty “hacky”

Pure CSS Horizontal Scrolling | CSS-Tricks

[Neno-N]

Thank you for answering!

I checked out how to do it using JavaScript and I used the

container.addEventListener('wheel', (e)=>{
          e.scrollLeft += 100;
}

code, however I am getting glitches when I scroll as in, it is not smooth scrolling.

But I guess that becomes a Javascript question.
Thank you for helping me out!