JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
		<div class="container">
			<div class="container-scroll">
				<div id="main-site" class="main">
					My goals is to make the div container scroll also when the mouse is hover this div in safari, in Google and IE8 i already know how to make work, but safari is shaking a lot!
				</div>
			</div>
		</div>
	</div>

CSS

#wrapper {
			width: 100%;
			height: 1500px;
			border: 1px solid red;
			padding-top: 380px;
		}
		#wrapper .container {
			border: 1px solid green;
			width: 100%;
			height: 500px;
			overflow: scroll;
		}
		#wrapper .container-scroll {
			height: 1500px;
			width: 100%;
			border: 1px solid yellow;
            position: relative;
		}
		#wrapper .main {
			width: 200px;
			height: 500px;
			background: black;
			overflow: scroll;
			position: absolute;
            color: white;
            left: 50%;
            margin-left: -100px;
            margin-top: 10px;
		}

JavaScript

var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight-main.offsetHeight;

main.parentNode.parentNode.onscroll = function() {
   main.style.top = Math.min(this.scrollTop,maxTop) + "px";
}