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>

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>

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

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

Here's a fiddle: http://jsfiddle.net/npwD8/

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

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

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

more