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! 🧑💻
Top comments (0)