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，因为滚动条区域是动态加载的。

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

Answer 1

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

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

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

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

Answer 2

scroll()事件不合格使用事件冒泡;

＆＃34;在所有浏览器中，load，scroll和error事件（例如，在<img>上元素）不要泡沫。＆＃34; - jQuery on() documentation。

因此事件授权（例如$(document).on('...', '...')）是不可能的，我很害怕。

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

2 个答案: