How to scroll two div elements at the same time

Question

I want to scroll two div at the same time, and the divs are in a jquery ui dialog. I want to detect its scroll event, and then I could scroll them at the same time. but I fa

Answer 1

You need to attach the scroll event directly to the scrolled element and get the position values using: scrollTop(), scrollLeft(). Here is a quick example:

JSnippet Demo

$(function(){
    $("#dialog").dialog({
        width: 400,
        height: 400
    });
    $("#dialog div").on('scroll', function(e) { 
        var ele = $(e.currentTarget);
        var left = ele.scrollLeft();
        var top = ele.scrollTop();
        if (ele.attr("id") === 'div1') {
            $("#div2").scrollTop(top);
            $("#div2").scrollLeft(left);
        } else {
            $("#div1").scrollTop(top);
            $("#div1").scrollLeft(left);
        }
    });
});