我想同时滚动两个div,并且div在jquery ui对话框中.
我想检测它的滚动事件,然后我可以同时滚动它们.但是我在第一步失败了.
对话框html是：
我想检测它的滚动事件,然后我可以同时滚动它们.但是我在第一步失败了.
对话框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',function() { alert("get it!"); }
解决方法
您需要将scroll事件直接附加到滚动元素并使用：scrollTop(),scrollLeft()获取位置值.这是一个简单的例子：
$(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);
}
});
});
