See the example here >>> https://codepen.io/Shahidul_56/pen/YJywXa

Scroll horizontali section.js

/* See related post at
https://codepen.io/Javarome/post/full-page-sliding
*/

var width = 0;
$(".scroller-wrap > div").each(function() {
  width += $(this).outerWidth( true );
});

$('.scroller-wrap').css('width', width);

function ScrollHandler(pageId) { 
  var page = $('#' + pageId);
  var pageStart = page.offset().left;
  var pageJump = false;

  function scrollToPage() {
    pageJump = true;
	  $('html, body').animate({ 
      scrollLeft: pageStart 
    }, {
      duration: 1000,
      complete: function() {
        pageJump = false;
      }
    });  
  }
  window.addEventListener('wheel', function(event) {
   var viewStart = $(window).scrollLeft();
   if (!pageJump) {
      var pageWidth = page.width();
      var pageStopPortion = pageWidth / 2;
      var viewWidth = $(window).width();

      var viewEnd = viewStart + viewWidth;
      var pageStartPart = viewEnd - pageStart;
      var pageEndPart = (pageStart + pageWidth) - viewStart;
      
      var canJumpDown = pageStartPart >= 0; 
      var stopJumpDown = pageStartPart > pageStopPortion; 
      
      var canJumpUp = pageEndPart >= 0; 
      var stopJumpUp = pageEndPart > pageStopPortion; 

      var scrollingForward = event.deltaY > 0;
      if (  ( scrollingForward && canJumpDown && !stopJumpDown) 
         || (!scrollingForward && canJumpUp   && !stopJumpUp)) {
        event.preventDefault();
        scrollToPage();
      } 
   } else {
     event.preventDefault();
   }    
  });
}
new ScrollHandler('one'); 
new ScrollHandler('two');
new ScrollHandler('three');