Properly coordinating two scroll areas

Question

I'm trying to coordinate the scrolling of two divs, similar to this question, but both of my divs are scrollable (whereas in the question one of the divs is the control and the other the slave, the user can scroll either and other re-scrolls accordingly).

My jQuery/JavaScript is:

// as the user scrolls one div, we also scroll the other

var scrolldiv1 = $('#scrolldiv1'),
    scrolldiv2 = $('#scrolldiv2');

scrolldiv1.scroll(function () { scrolldiv2.scrollTop(scrolldiv1.scrollTop()); });
scrolldiv2.scroll(function () { scrolldiv1.scrollTop(scrolldiv2.scrollTop()); });

When the user scrolls a div using the element's scrollbars, everything works beautifully. When the user scrolls a div using his or her mouse wheel while hovering over the element, the divs stay synchronized but scrolling is VERY sluggish. I suspect both events are firing and the positions fight each other.

Does anyone have any suggestions on what I can do to make wheel-scrolling just as snappy as the scrollbar-initiated scrolling?

Thanks in advance!

I would like to see that issue live. Can you provide a [live example](http://jsfiddle.net)? — John Dvorak, Mar 06 '13 at 18:28
Vega's example on jsfiddle demonstrates what I am experiencing. Scrolling by scrollbar is snappy, yet scrolling by scrollwheel over div is sluggish. — Timothy, Mar 06 '13 at 20:27

score 0 · Accepted Answer · answered Mar 06 '13 at 20:31

I was able to resolve my issue by adding a timeout event to delay triggering the scroll of the companion div.

scrolldiv1.scroll(function () {
    setTimeout(function () { scrolldiv2.scrollTop(scrolldiv1.scrollTop()); }, 200);
});
scrolldiv2.scroll(function () {
    setTimeout(function () { scrolldiv1.scrollTop(scrolldiv2.scrollTop()); }, 200);
});

Properly coordinating two scroll areas

1 Answers1