DEV Community

Cover image for Horizontal scroll on mouse wheel: nothing easier!
Luca
Luca

Posted on

Horizontal scroll on mouse wheel: nothing easier!

#javascript #html #css #jquery

Hi Dev! 🙋‍♂️

I've used this easy way for a horizontal scroll a lot and I want to share the code with you: ✌️

HTML

<div class="horizonal-wrapper"> <div class="horizonal-content"> <div class="content-1"></div> <div class="content-2"></div> <div class="content-3"></div> </div> </div>
Enter fullscreen mode Exit fullscreen mode 
.horizonal-wrapper { height: 100vh; width: 100%; overflow-y: scroll; } .horizonal-content { width: max-content; } .content-1, .content-2, .content-3 { width: 50vw; height: 100vh; float: left; border: 1px solid; }
Enter fullscreen mode Exit fullscreen mode

JS

$('.horizonal-wrapper').on('wheel', function(e){ e.preventDefault(); $(this).scrollLeft($(this).scrollLeft() + e.originalEvent.deltaY); });
Enter fullscreen mode Exit fullscreen mode

This is my fiddle example:
https://jsfiddle.net/k0bojwhu/

Thank you and good coding! 🧑‍💻

Top comments (0)