How do I get two scroll bars to scroll with jQuery and .on at the same time?


I had a suggestion to add this to my code:

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

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

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

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:

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.