我想同时滚动两个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);
- }
- });
- });