JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main yui3-skin-sam">
    <div class="content">
        <div id="canvas">
            <table>
                <tr>
                    <td class="left">
                        <div id="aerial" class="subhead">DOCUMENT</div>						
                        
                        <div class="text" id="text">
                            <div class="complete" id="complete">
<p>Thank you all. Mr. Speaker, Vice President Cheney, Members of Congress, members of the Supreme Court and diplomatic corps, distinguished guests, and fellow citizens: Today our Nation lost a beloved, graceful, courageous woman who called America to its founding ideals and carried on a noble dream. Tonight we are comforted by the hope of a glad reunion with the husband who was taken so long ago, and we are grateful for the good life of Coretta Scott King. Every time I'm invited to this rostrum, I'm humbled by the privilege and mindful of the history we've seen together. We have gathered under this Capitol dome in moments of national mourning and national achievement. We have served America through one of the most consequential periods of our history, and it has been my honor to serve with you. </p>

<p>In a system of two parties, two chambers, and two elected branches, there will always be differences and debate. But even tough debates can be conducted in a civil tone, and our differences cannot be allowed to harden into anger. To confront the great issues before us, we must act in a spirit of good will and respect for one another, and I will do my part. Tonight the state of our Union is strong, and together we will make it stronger. </p>

<p>In this decisive year, you and I will make choices that determine both the future and the character of our country. We will choose to act confidently in pursuing the enemies of freedom, or retreat from our duties in the hope of an easier life. We will choose to build our prosperity by leading the world economy, or shut ourselves off from trade...

CSS

.main {
	width: 500px;
}

.subhead {
    color: steelblue;
    font-weight: bold;
}

.left {
	width: 75%;
	height: 400px;
}

.complete {
	position: relative;
	font-size: 12px;
	padding: 5px 15px 15px 15px;
}

.text {
	height: 410px;
	border: 1px solid #DDD;
	overflow-y: auto;
}

.right {
	padding-left: 10px;
}

.aerial {
	border: 1px solid #999;
	position: relative;
	height: 400px;
	overflow: hidden;
}

.aerial .complete {
}

.aerial p {
	line-height: 2px;
	margin: 1px;
	font-size: 2px;
	color: #CCC;
}

.preview-pane {
	background-color: yellow;
	opacity:0.4;
  	filter:alpha(opacity=40); /* For IE8 and earlier */	
	position: absolute;

}

.thumb-pane {
	border: 1px solid #CCC;
	background-color: #FFF;
	width: 40px;
	padding-top: 1px;
	text-align: center;
	position: absolute;
}

JavaScript

YUI().use("dd-drag", "dd-constrain", function (Y) {
	//build minipage
	Y.one(".complete").cloneNode(true).appendTo(".aerial");

	//ratio of miniview to full text 
	var yscale = Y.one(".aerial").get("offsetHeight") / Y.one("#text .complete").get("offsetHeight");

	//make yellow div for signifying the current view
	Y.Node.create("<div>").addClass("thumb-pane").appendTo("body");
	Y.Node.create("<div>").addClass("preview-pane").appendTo(".aerial")
		.set("id", "pane")
		.setStyle("width", Y.one('.aerial').get("offsetWidth") - 2)
		.setStyle("height", yscale * Y.one(".aerial").get("offsetHeight"))
		.setStyle("top", 0);

	//heights of windows minus visible portion
	var ht_aer = Y.one(".aerial").get("offsetHeight") - Y.one("#pane").get("offsetHeight"),
		ht_aer_comp = Y.one(".aerial .complete").get("offsetHeight") - Y.one(".aerial").get("offsetHeight");
		ht_text_comp = Y.one("#text .complete").get("offsetHeight") - Y.one("#text").get("offsetHeight");

	var dd = new Y.DD.Drag({
        node: '#pane'
	}).plug(Y.Plugin.DDConstrained, {
	    constrain2node: '.aerial'
    });

	dd.on("drag:drag", function(e) {
		var percentScrolled = Y.one("#pane").get('offsetTop') / ht_aer;
        alert("abc");
		console.log("dragged", e);
       
		//scroll the left side
    	Y.one("#text").set("scrollTop", percentScrolled * ht_text_comp);
    	//parallax scrolling of small-text version
		Y.one(".aerial .complete").setStyle("top", -ht_aer_comp * percentScrolled);


		//console.log(percent);
    	//Y.one("#text").set("scrollTop", Y.one("#text .complete").get("offsetHeight") * e.details[0].info.offset[1] / ht_aer);
	});


	Y.one("#text").on("scroll", function(e) {
		console.log("scrolled", e);
		var percentScrolled = e.currentTarget.get('scrollTop') / ht_text_comp;  
		Y.one(".aerial .complete").setStyle("top", -ht_aer_comp * percentScrolled);
    	Y.one("#pane").setStyle('top', ht_aer * percentScrolled);
    	//console.log(this);
	});
});