同步两个Divs卷轴 - TinyMCE＆amp;预习

Question

我正在使用TinyMCE并在其中添加了直接预览，因此在每次按键时，预览都会使用TinyMCE上的数据进行更新。它看起来像这样：

然而，即使一切都设置好并且应该调整卷轴的高度％，它也不起作用。 TinyMCE未能达到真正的高度。

我在小提琴上重新创建了这个问题：https://jsfiddle.net/gm7j0e9u/3/

尝试编写大量行以便div滚动（并从TinyMCE上的“格式”中选择<pre>以更好地创建问题）。您会注意到它们不同步。另请查看我希望它在此Fiddle

上的行为方式

代码：

setup : function(ed) {
   ed.on('init', function() {
      $('.editorContainer > .mce-tinymce > .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);
       })
     }
   }
 }