javascript - 如何使用 jQuery 和 .on 让两个滚动条同时滚动？

Question

我有一个建议将其添加到我的代码中:

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

所以我可以同时更改两个滚动条。这是我正在使用的 HTML:

<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，但滚动条似乎没有一起滚动。任何人都可以帮助说明这是为什么。

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

这是一个 fiddle :http://jsfiddle.net/npwD8/

Answer 1

我已经将您在 JSFiddle 上的示例更新为一个可行的示例，但我不确定它最终是否适合您的用例。

http://jsfiddle.net/npwD8/4/

$('.wrapper').on('scroll', function({
    $(".wrapper").not(this).scrollLeft($(this).scrollLeft());
});

滚动事件不会冒泡，因此从窗口向下委派将不起作用。当这些元素被添加到 DOM 时，您需要手动处理这些事件的附件。