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.

   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:



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 () {
   // 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