如何使用jQuery和.on使两个滚动条同时滚动?

问题描述：

我建议将其添加到我的代码中

I had a suggestion to add this to my code:

<script type="text/javascript">
    $(document).on('scroll', '.wrapper1', function () {
        $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
    });
    $(document).on('scroll', '.wrapper2', function () {
        $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
    });
</script>

所以我可以一起改变两个滚动条.这是我正在使用的HTML:

So I could change two scroll bars at together. Here's the HTML that I am using:

<div class="wrapper1">
   <div class="div1">
   </div>
</div>
<div class="wrapper2">
   <div class="div2">
      <div data-ng-class="{'hidden': loading!=0 }"
         data-ng-form="gridForm">
         <table class="form grid table" style="height: 600px; width: 1500px;">
         </table>
      </div>
   </div>
</div>

我已加载jQuery，但似乎滚动条不能一起滚动.谁能帮忙提出这个原因.

I have jQuery loaded but it seems that the scroll bars don't scroll together. Can anyone help suggest why this is.

请注意，由于滚动条区域是动态加载的，因此我需要使用.on.

Note I need to use .on as the scroll bar area is loaded dynamically.

这是一个小提琴: http://jsfiddle.net/npwD8/

答

scroll()事件没有资格使用事件冒泡；

The scroll() event is unqualified to use event bubbling;

在所有浏览器中，load，scroll和error事件(例如，在<img> 元素)."- jQuery on()文档 .

"In all browsers, the load, scroll, and error events (e.g., on an <img> element) do not bubble." - jQuery on() documentation.

因此，恐怕无法使用事件委派(例如$(document).on('...', '...')).

Therefore event delegation (e.g. $(document).on('...', '...')) isn't possible with it I'm afraid.

如何使用jQuery和.on使两个滚动条同时滚动?

相关推荐