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.

Answer 1

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() );
} );