如何同时滚动两个div元素

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

 
hello, world ...
 
hello, world ...
  

对话框js是：

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

ret的内容是对话框html，我通过使用.ajax（）得到它。

滚动function是：

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

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

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

Answer 1

您需要将scroll事件直接附加到滚动元素并使用： 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); } }); });