title: Scroll a div when focused on an internal div
body: <p>I need to make a scrollable div, scroll even if the mouse is upon the content (inside the scrollable div), and not just beside it (Where it is blank). This is what I have so far:</p>
  
  <pre><code>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";
  }
  </code></pre>
  
  <p>In Chrome is ok
  In IE8+ is ok (i know a hack)
  In Safari the content shakes a lot when i scroll, can i fix that? (I want fix this)</p>
  
  <p>Working fiddle -> <a href="https://jsfiddle.net/8oj0sge4/6/" rel="nofollow">https://jsfiddle.net/8oj0sge4/6/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;div class="container"&gt;
      &lt;div class="container-scroll"&gt;
        &lt;div id="main-site" class="main"&gt;
          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!
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you guys.</p>