14

Is it possible to scroll 2 scrollbars with one scrollbar?

Benjamin
  • 273
  • 2
  • 6
  • 9
  • 4
    What's wrong with answering some of your other questions? – Ash Burlaczenko Mar 22 '11 at 09:40
  • People will be more inclined to answer your questions if you vote up and accept answers. Having said that - have a look at this plugin (a quick google search) - http://blogs.msdn.com/b/matt/archive/2009/03/19/synchronizing-scrollbars-using-jquery.aspx – Bob Mar 22 '11 at 11:58

4 Answers4

31

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.

beeglebug
  • 3,522
  • 1
  • 23
  • 39
  • 1
    It works fine in Firefox for me. I think the problem was that the images in the jsfiddle were no longer there, so I updated it to point at new images. The code itself is jQuery, so should be cross browser. – beeglebug May 19 '14 at 10:11
  • how to decouple them now ?? the solution yew gave works fine for coupling scrollbars together.. but what shud be done to decouple them all ?? reply ASAP – Ashish Sajwan May 21 '14 at 11:26
5

(to append beeglebug):

For horizontal 'linked' scrolling use: 

$('.linked').scroll(function(){
    $('.linked').scrollLeft($(this).scrollLeft());
});
Gerrit B
  • 184
  • 1
  • 9
2

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)

Lox
  • 99
  • 1
  • 2
  • 10
  • 1
    I believe the problem is not the .classes vs the #ids. The problem is that with the classes you are linking them to each other. If you link them to each other (as I have to do...) with the ids, the mousewheel problem remains. The reason why is working find for you is because you are linking them in only one direction. (scrolling the slave will not make the master to scroll) – David Torres Nov 05 '16 at 17:59
2

If you are experiencing slow scrolling when you are using your mousewheel on linking scrollbars with beeglebug solution, here is a trick to fix it.

The cool thing is that it is kinda compact and it doesn't use any id, only classes, so much more sustainable.

// First add the class "linked-scrollbar" to the elements you want to link

// Then manually or dynamically add an attribute which will contain
// the data if the element is currently scrolling or not
$('.linked-scrollbar').attr("data-scrolling", "false");

$('.linked-scrollbar').scroll(function(){
    if($(this).attr("data-scrolling") == "false"){
        $('.linked-scrollbar').not(this).attr("data-scrolling", "true");
        $('.linked-scrollbar').not(this).scrollLeft($(this).scrollLeft());
    }
    $(this).attr("data-scrolling", "false");
});

Here is a jsfiddle showing that bug and the fix.

p_duthoit
  • 226
  • 4
  • 19
  • This has nothing to do with the question. – Dylan Slabbinck Apr 27 '17 at 09:10
  • It is. When you are linking multiple scrollbars using beeglebug solution, some people (such as me) have really slow scrolling (due to a loop between events). Here is a [jsfidle](https://jsfiddle.net/sgcer/1274/) showing this bug. My answer is just an improvement (or a fix) for people who are facing this same problem. – p_duthoit Apr 27 '17 at 09:59