Is it possible to tether scrollbars together?

Question

I'm trying to open up 2 images within a modal separated by a black line, and there is a scroll bar for each separate window and overflow is set to scroll. The images in each window are identical except they've been enlarged by different algorithms from their original form (don't worry about any of this, it's just to give you an idea of the purpose). I want it so that when you are comparing images that overflow, the scroll bars are tethered or bound to each other so that when you scroll on one window, it scrolls on the other window.

If you need a specific code example I'll present one later, because I just want to get an idea of how this might be possible for now. Thanks for your help.

score 4 · Answer 1 · answered Aug 09 '12 at 14:26

4

Basically, you need to hook the onscroll event of both scrolling elements and in each one set the scrollTop of the other to what you scrolled to. Also, make sure you set and clear a boolean before and after so you don't get mutual recursion.

answered Aug 09 '12 at 14:26

Anthony Mills

8,676
4
32
51

+1 for catch on on possible infinite event recursion! – Chad Harrison Aug 09 '12 at 14:30
Thanks! I did have to implement this once (mutual scrolling diff) and the recursion bit was a small but important detail. :) – Anthony Mills Aug 09 '12 at 14:46

D.A · Accepted Answer · 2012-08-09T14:45:44.637

2

You can use jQuery to listen for scroll events and then perform the same scroll on the second container. You may have to use some logic if the images are different sizes however.

This should help you get started.

Here is an example.

EDIT

For archival purposes I have provided the jQuery used in the example.

$( '#one' ).scroll( function() {
    $( '#two' ).scrollTop( $( '#one' ).scrollTop() );
} );

edited Aug 09 '12 at 14:45

answered Aug 09 '12 at 14:26

D.A

2,555
1
14
10

I've heard of the scroll event, but could you give an example of how I might trigger the same scroll event on another container? – Gavin Sellers Aug 09 '12 at 14:28
I've updated my answer with a link to an example. – D.A Aug 09 '12 at 14:35

score 2 · Answer 3 · answered Aug 09 '12 at 14:28

I imagine would have to usa an object.onscroll event for each picture. Just assign the scoll value to the other picture of the current picture following

object.addEventListener ("scroll", handler, useSomething);
object.attachEvent ("onscroll", handler);

score -1 · Answer 4 · answered Aug 09 '12 at 14:23

-1

Use an iframe - put both pictures in the file to be shown in the iframe, then you only need one scroll bar.

answered Aug 09 '12 at 14:23

DaveP

568
6
18

Is it possible to tether scrollbars together?

4 Answers4