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

});