JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    
    	<div id="half"></div>
        <div id="toZoom">
        	<div id="dragMe" class="ui-widget-content"><div id="halfSquare"></div></div>
        </div>
        
        <div id="scroller">
        	<div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
        </div>
  	
    </div>

Change pink magnifier height:
<div id="slider1"></div>
Change orange  content:
<div id="slider2"></div>

CSS

* {
			padding: 0px;
			margin: 0px;
		}
		
		#wrapper {
			width: 960px;
/*			height: 600px; */
			margin-top: 50px;
			margin-left: auto;
			margin-right: auto;
			position: relative;
			overflow: hidden;
			background-color: #F2F2F2;
			border: 1px solid #000;
		}
		
		#half {
	        top: 0px;
            left: 0px;
            position: absolute;			
            height: 50%;
            width: 100%;
			background-color: #990;
		}
		
		#toZoom {
			width: 300px;
			height: 500px;
			position: relative;
			background-color: #F63;
            margin: 50px 0px;
		}
		
		#halfSquare {
			height: 50%;
			width: 100px;    
			background-color: #F0F;
		}
	
		#dragMe {
			height: 100px;
			width: 100px;
			background-color: #000;
			position: absolute;
			top: -50px;
			left: 100px;       
            background-image: none;
            border: 0px solid black;
		}
		
		#scroller {
			height: 700px;
			width: 300px;
			background-color: #966;
			position: absolute;
			top: 300px;
			right: 100px;
		}
		
		.content {
			width: 150px;
			height: 25px;
			margin-left: auto;
			margin-right: auto;
			margin-top: 50px;
			background-color: #3C0;	
		}

JavaScript

$(document).ready(function() {
    
    function adjustPositions(){
        var wrapperObj=$("#wrapper");
        var magnifierObj=$("#dragMe");
        var scrollerObj=$("#scroller");
        var zoomObj=$("#toZoom");
        
        
        var magCenterPosition=magnifierObj.offset().top+magnifierObj.height()/2-zoomObj.offset().top;        
        var magRelativePosition=magCenterPosition/zoomObj.height();
        
        var newScrollerPosition=wrapperObj.height()/2-magRelativePosition*scrollerObj.height();
        
    }
    
    
    $("#dragMe").draggable({                 
        axis: "y",
        containment: $("#wrapper"),
        drag: function(event, ui)
        { 
            adjustPositions();
        } 
    });
    
    $("#slider1").slider({        
        min: 100,
        max: 1000,
        slide: function(event,ui){          
            $("#dragMe").css("height",ui.value+"px");
            $("#toZoom").css("margin",ui.value/2+"px 0px");
            adjustPositions();            
        }
    });
    
    $("#slider2").slider({        
        min: 400,
        max: 1000,
        slide: function(event,ui){          
            $("#toZoom").css("height",ui.value+"px");     
            adjustPositions();            
        }
    });
    
});