title: Syncing Two Divs Scrolls - TinyMCE & Preview
body: <p>I am using TinyMCE and added a direct preview in it, so on every key press, the preview gets updated with the data on TinyMCE. It looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/FWhwJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FWhwJ.png" alt="enter image description here"></a></p>
  
  <p>However, even though everything seem setup and should adjust the height % of scrolls, it doesn't work. TinyMCE is failing to get the true heights.</p>
  
  <hr>
  
  <p>I have re-created the issue on a Fiddle: <a href="https://jsfiddle.net/gm7j0e9u/3/" rel="nofollow noreferrer">https://jsfiddle.net/gm7j0e9u/3/</a></p>
  
  <p>Try writing lots of lines so that div scrolls (and select <code>&lt;pre&gt;</code> from 'Formats' on TinyMCE for creating the problem better). You will notice that they do not sync. Please also take a look how I want it to behave on this <a href="http://jsfiddle.net/b75KZ/5/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <hr>
  
  <p>The code:</p>
  
  <pre><code>setup : function(ed) {
     ed.on('init', function() {
        $('.editorContainer &gt; .mce-tinymce &gt; .mce-container-body').children().eq(2).on('scroll', function () {
           var tmceBody = ed.getBody();
  
           console.log("this offsetHeight: " + this.offsetHeight);   // 501
           console.log("this scrollTop: " + this.scrollTop);         // 160
           console.log("this scrollHeight: " + this.scrollHeight);   //  806
  
           var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
           console.log("this percentage: " + percentage);    // 0.5 -- Prev div works
  
           console.log("TMCE offsetHeight: " + tmceBody.offsetHeight);    // 1009
           console.log("TMCE scrollTop: " + tmceBody.scrollTop);          // 14
           console.log("TMCE scrollHeight: " + tmceBody.scrollHeight);    // 1037
  
           var x = percentage * (tmceBody.scrollHeight - tmceBody.offsetHeight);
  
           console.log("TMCE x: " + x);       // 14.2
  
           (tmceBody).scrollTop(x);
         })
       }
     }
   }
  </code></pre>