Syncing div’s scroll & tinymce’s scroll

I have tinymce as my text editor and I have a div for displaying it as preview. I want them to scroll in sync like this demo.

tinymce.init({
   setup : function(ed) {
      ed.on('init', function() {
         $(ed.getWin()).bind('scroll', function(e){
             var scrollPercent = 100 * $(this).scrollTop() / ($(this).height() - $(this).height())

             var previewDiv = $('.editorContainer > .mce-tinymce > .mce-container-body').children().eq(2);
             // here I need to sync preview to tinymce;
        });
      });
   }
}

I created preview element dynamically on tinymce initalisation completion:

$('

').insertAfter('#mceu_22');

First, I need to somehow sync the preview to the tinymce.


And then, I need to sync tinymce to preview

$('.editorContainer > .mce-tinymce > .mce-container-body').children().eq(2).on('scroll', function () {
   alert("X");
   // I get this alert. I need to sync tinymce to preview's scroll this time.

  // $(tinyMCE.activeEditor.selection.getWind()).scrollTop($(".prev").scrollTop());
});

Can you please help me overcome this issue?


Source: stackoverflow-javascript