JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="wrapper">
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
  </div>
</div>

CSS

.container{
  display:block;
  width:100%;
  height:200px;
  overflow-x:hidden;
  overflow-y:scroll;
  background-color: grey;  
}
.wrapper{
  display:block;
  overflow:hidden;
  background-color:#a3cfef;
  padding: 2%;
  width:50%;
  margin:0 auto;
}
.item{
  width:100%;
  height:50px;
  margin:2px 0;
  display:block;
  overflow:hidden;
  border:1px solid brown;
}

JavaScript

var handlerMousewheel = function(){
		$(".item").on("mousewheel", function(event) {
			event.preventDefault();
				var deltaY = event.originalEvent.deltaY;
				var wheelDeltaY = event.originalEvent.wheelDeltaY;

				 if( deltaY == 100 && wheelDeltaY == -120 || deltaY > 0 && wheelDeltaY == undefined ) {
			   		$(".wrapper").animate({"margin-left":"0%"},{duration:100});
				 }else if(deltaY == -100 && wheelDeltaY == 120 || deltaY < 0 && wheelDeltaY == undefined){
			      $(".wrapper").animate({"margin-left":"50%"},{duration:100});
				 }
	
		});
	}
  handlerMousewheel();