title: How to bind multiple elements to scroll together?
body: <p>I have 3 different tables that scroll horizontally (one scrolls vertically). How do I bind them all together so if I scroll horizontally on one, they all scroll?</p>
  
  <p>I've read through <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft" rel="nofollow">here</a> (Mozilla docs) but I can't get it to work.</p>
  
  <p>It seems like it should be fairly simple.</p>
  
  <pre><code>&lt;div class="page-wrapper relative"&gt;
  &lt;div class="table-wrapper-outter"&gt;
      &lt;div class="table-wrapper"&gt;
          &lt;div class="header header-wrapper"&gt;
              &lt;div class="header-inner"&gt;
                  &lt;table id="headerTable" class="table-contents"&gt;
                      &lt;tr&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; etc... &lt;/td&gt;
                      &lt;/tr&gt;
  
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="bodyHolder" class="table-content-outter"&gt;
              &lt;div class="table-content-inner"&gt;
                  &lt;table id="mainTable" class="table-contents"&gt;
                          &lt;tr&gt;
                              &lt;td&gt; 1234567890 &lt;/td&gt;
                              &lt;td&gt; 1234567890 &lt;/td&gt;
                              &lt;td&gt; 1234567890 &lt;/td&gt;
                              &lt;td&gt; 1234567890 &lt;/td&gt;
                              &lt;td&gt; 1234567890 &lt;/td&gt;
                              &lt;td&gt; 1234567890 &lt;/td&gt;
                              &lt;td&gt; 1234567890 &lt;/td&gt;
                              &lt;td&gt; 1234567890 &lt;/td&gt;
                              &lt;td&gt; 1234567890 &lt;/td&gt;
                              &lt;td&gt; etc... &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;!-- many rows --&gt;
  
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="header footer-wrapper"&gt;
              &lt;div class="header-inner"&gt;
                  &lt;table id="footerTable" class="table-contents"&gt;
                      &lt;tr&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; 1234567890 &lt;/td&gt;
                          &lt;td&gt; etc... &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And here is the javascript I tried:</p>
  
  <pre><code>function megaTableInit(tableBodyHolder, mainTable, headerTable, footerTable, tablePullDivs, tableRowHeads) {
  var bodyHolder = document.getElementById(tableBodyHolder);
  var mTable = document.getElementById(mainTable);
  var hTable = document.getElementById(headerTable);
  var fTable = document.getElementById(footerTable);
  var pullDivs = document.getElementsByClassName(tablePullDivs);
  var rowHeads = document.getElementsByClassName(tableRowHeads);
  
  bodyHolder.onmousemove = bodyHolder.onscroll = function() {
  
      pullDivs[0].scrollLeft = this.scrollLeft;
  
      var sl = this.scrollLeft;
  
      if(this.oldSL != sl) {
          this.oldSL = sl;
  
          for (i=0; i&lt;pullDivs.length; i++) {
              pullDivs[i].scrollLeft = this.scrollLeft;
          }
      }
  }
  </code></pre>
  
  <p>I don't get any errors. It just doesn't do anything with the over divs. When I run console.log for <code>sl</code> and <code>this.scrollLeft</code> I get the pixels as I scroll. But it doesn't set the scroll for the other divs.</p>
  
  <p>Any help would be appreciated.</p>