How to horizontally scroll by mouse wheel

[Shofol]

Hi, I want a horizontally scrolling website and find a solution using Flexbox. The scroll and divs are showing as I want.
But, the problem is- I can’t scroll by mouse wheel. Is there any way to do that using CSS or do I need to use JS for that?

Codepen Link: https://codepen.io/AnowerJahan/pen/rbwjxq

[Dagny]

You need JS for that. Here is a tutorial https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

Their JS link has expired, here is another one – https://github.com/jquery/jquery-mousewheel (would be better to find a recent version)

[Shikkediel]

The vanilla wheel event has good support by now, so jQuery would not even be needed…

codepen.io/anon/pen/rbzMwN

[Shofol]

Excellent Solutions. Thank you very much to both of you. And, Shikkediel, thanks for the demonstration :)

[Marvin El Marziano]

@Shikkediel That Codepen doesn’t seem to work on my MacOS Safari? No problem Firefox+Chrome. I can’t figure out why at the moment, but it seems to try to vertically scroll. Adding “overflow-y: hidden;” to the CSS for the “body”-element hides the vertical scrollbar but doesn’t start scrolling. I tried to add “e.preventdefault()” to override the vertical scroll but no cigar.

[Author]

Posts