Synchronizing Scrolling Between 2 Divs With Different Text Size

I can't find a way to synchronize two divs, with the same text, but different text size and padding. I have two divs, one with a markdown text, and the other one with the html rend

Solution 1:

You can see the example of synchronizing two divs at: JSFiddle

HTML

Given you have two divs placed next to each other horizontally. Each of the divs contain another div and it is scrollable vertically:

<divclass="outer"id="div1"><div></div></div><divclass="outer"id="div2"><div></div></div>

CSS

This is just to make two outer divs lie next to each other at the same baseline and make it scrollable vertically.

div.outer
{
    display:inline-block;
    width:150px;
    height:320px;
    border:1px solid black;
    overflow-y:auto;
}

div.outer > div
{
    width:100%;
    height:3000px;
}

JavaScript

The simplest approach is, bind scroll event to each of the outer divs, take the scrollTop value and apply to its counterpart div as follows:

$('#div1').scroll(function(){
    $('#div2').scrollTop( $('#div1').scrollTop() );
});

$('#div2').scroll(function(){
    $('#div1').scrollTop( $('#div2').scrollTop() );
});

So when you scroll on the left div, it synchronizes the right div, and vice-versa.