How to synchronize two scrollbars for divs

Question

I have this code for comparing files: http://jsfiddle.net/CrN6X/

Now he does what I need:

• One big div that scrolls only vertically
• Two smaller dives that scroll only horizontally

This way, I can easily compare my files, but I have one problem: lower scrollbars are only available when I scroll all the way down.

How can I make them float or move the scrollbar to another div, which can always be seen, so I don’t have to scroll down another div to the end in order to access them?

Answer 1

You really need javascript for this, but I added html so you can see it in action.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> $("#div1").scroll(function () { $("#div2").scrollTop($("#div1").scrollTop()); $("#div2").scrollLeft($("#div1").scrollLeft()); }); $("#div2").scroll(function () { $("#div1").scrollTop($("#div2").scrollTop()); $("#div1").scrollLeft($("#div2").scrollLeft()); }); 

 <div id="div1" style="float:left;overflow:auto;height:100px;width:200px;"> <p>lulz</p> <p>lulz</p> <p>lulz</p> <p>lulz</p> </div> <div id="div2" style="float:right;overflow:auto;height:100px;width:200px;"> <p>lulz</p> <p>lulz</p> <p>lulz</p> <p>lulz</p> </div> 

Answer 2

No, the scrollbar fits inside your smaller div. These scroll bars are locked at the bottom of your div so they don't work.

What you can do is make two javascript scrollbars under your big div and completely disable the default scrollbar. Then you always see your scrollbars. If you want to go the extra mile, it will also allow you to connect the scroll bars so that both the left and right windows scroll to the same position, allowing better comparisons.