Scroll 2 scrollbars with jquery the same time

Question

Is it possible to scroll 2 scrollbars with one scrollbar?

Answer 1

All you need to do it tie the scrollTop property of one element to the scrollTop of the other, using a function tied to the scroll event.

Something along the lines of:

$('.linked').scroll(function(){
    $('.linked').scrollTop($(this).scrollTop());    
})

With that function, all elements with a class of linked will scroll whenever you use the scrollbars of one of them. (I assumed vertical scrolling, if you wanted horizontal, do the same but with scrollLeft)

See http://jsfiddle.net/g8Krz/510/ for a working example of the above.

Answer 2

(to append beeglebug):

For horizontal 'linked' scrolling use:

$('.linked').scroll(function(){
    $('.linked').scrollLeft($(this).scrollLeft());
});

Answer 3

I want to add a little improvement to the solution of beeglebug (which is already working nearly perfect).

If you discover VERY SLOW SCROLLING by using the MOUSEWHEEL on some browsers (e.g. OPERA), try to use unique IDs for the DIVs instead of the class:

$('#master').scroll(function(){
$('#slave').scrollTop($(this).scrollTop());
}); 

I had this problem and tried many solution but this one finally was the easiest. Taking a wild guess, i would claim that OPERA gets some performance problems while identifying the DIVs by class all the time when scrolling. (just noticed massive raise in CPU usage while using class as identifier)