vertical scroll two tables at the same time

Question

I have two tables that must scroll together:

$('.vscroll').on('scroll', function (e) {
    divTable1.scrollTop = e.scrollTop;
    divTable2.scrollTop = e.scrollTop;

There's a little lag issue though. Table1 scrolls milliseconds before Table2.

I know scrollTop fires the scroll event, but is there a way to delay the scrolling of Table1 until Table2's scrollTop is also set?

Answer 1

Try using a setTimeout to trigger the scrolls, and then return false to cancel the original scrollevent:

var ignoreEvent = false;

$(".vscroll").on('scroll', function (e) {
    if (!ignoreEvent) {
        setTimeout(function() {
            ignoreEvent = true;
            table1.scrollTop = e.scrollTop;
            table2.scrolLTop = e.scrollTop;
        }, 100);
    }

    ignoreEvent = false;
    return false; // cancels the original scroll event.
}

Answer 2

I'm using div s instead of table s but you get the idea

$("div").on("scroll",function(){
    $("div:not(this)").scrollTop($(this).scrollTop());
});

DEMO