How to scroll two div elements at the same time

Question

I want to scroll two divs at the same time and the div in the jquery ui dialog box. I want to detect its scroll event, and then I could scroll them at the same time. but I fail in the first step. html dialog box:

<div>
    <div id="div1" style="width=3px; overflow-x:scroll;">hello, world ...</div>
    <div id="div2" style="width=3px; overflow-x:scroll;">hello, world ...</div>
</div>

js dialog:

$(ret).dialog({
    width: 100,
    height: 120
});

the contents of ret is an html dialog and I get it using .ajax ().

scroll function:

$(document).on('scroll', 'div[id=1]', function() { alert("get it!"); }

Unfortunately, the scroll function does not work. however, it works if I change 'scroll' to 'click'. I don’t know why, could you help me? thanks!

$(document).on('click', 'div[id=1]', function() { alert("get it!"); }

Answer 1

, : scrollTop(), scrollLeft(). :

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