javascript - synchronizing scrolling between 2 divs with different text size -

i can't find way synchronize 2 divs, same text, different text size , padding. have 2 divs, 1 markdown text, , other 1 html render of markdown , want synchronize scrolltop between divs.

for example, stackedit.io

you can see example of synchronizing 2 divs at: jsfiddle

html

given have 2 divs placed next each other horizontally. each of divs contain div , scrollable vertically:

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

css

this make 2 outer divs lie next each other @ same baseline , make 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 each of outer divs, take scrolltop value , apply counterpart div follows:

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

so when scroll on left div, synchronizes right div, , vice-versa.