jquery – 如何同时滚动两个div元素

前端之家收集整理的这篇文章主要介绍了jquery – 如何同时滚动两个div元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想同时滚动两个div,并且div在jquery ui对话框中.
我想检测它的滚动事件,然后我可以同时滚动它们.但是我在第一步失败了.
对话框html是:
  1. <div>
  2. <div id="div1" style="width=3px; overflow-x:scroll;">hello,world ...</div>
  3. <div id="div2" style="width=3px; overflow-x:scroll;">hello,world ...</div>
  4. </div>

对话框js是:

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

ret的内容是对话框html,我通过使用.ajax()得到它.

滚动功能是:

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

不幸的是,滚动功能不起作用.
但是,如果我将’scroll’更改为’click’,它就有效.我不知道为什么,你能帮帮我吗?谢谢!

  1. $(document).on('click',function() { alert("get it!"); }

解决方法

您需要将scroll事件直接附加到滚动元素并使用:scrollTop(),scrollLeft()获取位置值.这是一个简单的例子:

JSnippet Demo

  1. $(function(){
  2. $("#dialog").dialog({
  3. width: 400,height: 400
  4. });
  5. $("#dialog div").on('scroll',function(e) {
  6. var ele = $(e.currentTarget);
  7. var left = ele.scrollLeft();
  8. var top = ele.scrollTop();
  9. if (ele.attr("id") === 'div1') {
  10. $("#div2").scrollTop(top);
  11. $("#div2").scrollLeft(left);
  12. } else {
  13. $("#div1").scrollTop(top);
  14. $("#div1").scrollLeft(left);
  15. }
  16. });
  17. });

猜你在找的jQuery相关文章