unified scroll bars for two panes(divs)

Question

I have a requirement where I need to synchronize the scrolling for 2 divs that are next to each other. What would be the best way to acheive this?

Thanks, Chris P.S: Right now both the divs have their own table/s and/or div/s inside whose content ensure there is always a scroll bar on both of them always visible.

Answer 1

You could just add a scroll event listener, and then sync them from there? Example

function keepInSync() {
    var elements = [];
    var sync = function(e) {
        var target = e.target;

        for (var k = 0, l = elements.length; k < l; k++) {
            var element = elements[k];
            if (element === target) continue;
            element.scrollTop = target.scrollTop;
            element.scrollLeft = target.scrollLeft;
        }
    };

    for (var k = 0, l = arguments.length; k < l; k++) {
        var element = arguments[k];
        if (document.addEventListener) {
            element.addEventListener('scroll', sync);
        } else {
            element.attachEvent('onscroll', sync);
        }
        elements.push(element);
    }
}