Horizontal Scrolling is not working

HTML-CSS
#1

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!

#2

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”

1 Like
#3

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!