如何同时滚动两个div元素

Question

如何同时滚动两个div元素

4

我希望同时滚动两个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!"); }

- Mark Z.

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shlomi Hassid · Accepted Answer

您需要直接将滚动事件附加到滚动元素，并使用以下方式获取位置值：scrollTop()，scrollLeft()。这里是一个快速的示例：

JSnippet演示

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