jquery - 如何同时滚动两个div元素

Question

我想同时滚动两个div，并且div位于jquery ui对话框中。我想检测它的滚动事件，然后我可以同时滚动它们。但我第一步就失败了。对话框 html 是:

<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是:

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

ret的内容是对话框html，我是通过.ajax()获取的。

滚动功能是:

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

不幸的是，滚动功能不起作用。但是，如果我将“滚动”更改为“单击”，它就会起作用。我不知道为什么，你能帮我吗？谢谢!

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