synchronizing scrolling between 2 divs with different text size

Question

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

Answer 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:

<div class="outer" id="div1">
    <div>
    </div>
</div>
<div class="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.