Horizontal scroll on mouse wheel: nothing easier!

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

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