DEV Community

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

Posted on

9

Horizontal scroll on mouse wheel: nothing easier!

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)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay