JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="left">
		<div id="left1" class="onLeft Side">
		</div>

		<div id="left2" class="onLeft Side">
		</div>

		<div id="left3" class="onLeft Side">
		</div>
	</div>

	<div class="right">
		<div id="right3" class="onRight Side">
		</div>

		<div id="right2" class="onRight Side">
		</div>

		<div id="right1" class="onRight Side">
		</div>
	</div>

CSS

html,
body{
	height: 100%;
	margin: 0;
	padding: 0;
	/*max-height: 100%;*/
	overflow: hidden;
}

.Side{
	width:100%;
	height:100%;
}

.left{
	width:50%;
	height: 100%;
	float:left;
	left:0;
	position:absolute;

}

.right{
	width:50%;
	height:100%;
	float:right;
	right:0;
	position:absolute;
}

#left1{
	background-color: green;
}

#left2{
	background-color: purple;
}

#left3{
	background-color: brown;
}

#right1{
	background-color: blue;
}

#right2{
	background-color: orange;
}

#right3{
	background-color: black;
}

JavaScript

$(document).ready(function(){
			var wholeHeight = jQuery('.right').height();
			var rightLength = jQuery('.onRight').length;
			jQuery('.right').css({top:-((wholeHeight*rightLength)-wholeHeight)});

			var leftHeight = jQuery('.left').height();
			var leftLength = jQuery('.onLeft').length;
			var tot = (leftHeight * leftLength) - leftHeight;
			console.log('tot', tot)
    		$('body').bind('mousewheel', function(e){
    			var height = jQuery('.left').height();
				var leftTop = jQuery('.left').position().top;
				var rightTop = jQuery('.right').position().top;
        		if(e.originalEvent.wheelDelta /120 > 0) {
        			if (leftTop != 0) {
        				console.log('scrolling up !');
            			jQuery('.left').animate({top:leftTop + height});
						jQuery('.right').animate({top:rightTop - height});
        			} else {
        				console.log('The up end');
        			}
        		} else {
        			if (leftTop != -tot) {
            			console.log('scrolling down !');
            			jQuery('.left').animate({top:leftTop - height});
						jQuery('.right').animate({top:rightTop + height});
					} else {
						console.log('the down end')
					}
        		}
    		});
		});