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>
<d…

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>
.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;
}

JS

$('.horizonal-wrapper').on('wheel', function(e){

   e.preventDefault();
   $(this).scrollLeft($(this).scrollLeft() + e.originalEvent.deltaY);

});

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

Thank you and good coding! 🧑‍💻


Print Share Comment Cite Upload Translate
APA
Luca | Sciencx (2024-03-29T05:03:45+00:00) » Horizontal scroll on mouse wheel: nothing easier!. Retrieved from https://www.scien.cx/2021/11/16/horizontal-scroll-on-mouse-wheel-nothing-easier/.
MLA
" » Horizontal scroll on mouse wheel: nothing easier!." Luca | Sciencx - Tuesday November 16, 2021, https://www.scien.cx/2021/11/16/horizontal-scroll-on-mouse-wheel-nothing-easier/
HARVARD
Luca | Sciencx Tuesday November 16, 2021 » Horizontal scroll on mouse wheel: nothing easier!., viewed 2024-03-29T05:03:45+00:00,<https://www.scien.cx/2021/11/16/horizontal-scroll-on-mouse-wheel-nothing-easier/>
VANCOUVER
Luca | Sciencx - » Horizontal scroll on mouse wheel: nothing easier!. [Internet]. [Accessed 2024-03-29T05:03:45+00:00]. Available from: https://www.scien.cx/2021/11/16/horizontal-scroll-on-mouse-wheel-nothing-easier/
CHICAGO
" » Horizontal scroll on mouse wheel: nothing easier!." Luca | Sciencx - Accessed 2024-03-29T05:03:45+00:00. https://www.scien.cx/2021/11/16/horizontal-scroll-on-mouse-wheel-nothing-easier/
IEEE
" » Horizontal scroll on mouse wheel: nothing easier!." Luca | Sciencx [Online]. Available: https://www.scien.cx/2021/11/16/horizontal-scroll-on-mouse-wheel-nothing-easier/. [Accessed: 2024-03-29T05:03:45+00:00]
rf:citation
» Horizontal scroll on mouse wheel: nothing easier! | Luca | Sciencx | https://www.scien.cx/2021/11/16/horizontal-scroll-on-mouse-wheel-nothing-easier/ | 2024-03-29T05:03:45+00:00
https://github.com/addpipe/simple-recorderjs-demo