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

不幸的是，滚动功能不起作用。但是，如果我将'scroll'更改为'click'，它就有效。我不知道为什么，你能帮帮我吗？谢谢！

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

如何同时滚动两个div元素

1 个答案: