Reusable Scroll Sync w/o JQuery

by thomastthai

HTML

<!--
https://stackoverflow.com/questions/9236314/how-do-i-synchronize-the-scroll-position-of-two-divs
-->

<div class="scrollSync" id="1">
   <table>
       <tr><td>Left Line 1</td></tr>
       <tr><td>Left Line 2</td></tr>
       <tr><td>Left Line 3</td></tr>
       <tr><td>Left Line 4</td></tr>
       <tr><td>Left Line 5</td></tr>
       <tr><td>Left Line 6</td></tr>
       <tr><td>Left Line 7</td></tr>
       <tr><td>Left Line 8</td></tr>
       <tr><td>Left Line 9</td></tr>
       <tr><td>Left Line 10</td></tr>
       <tr><td>Left Line 11</td></tr>
       <tr><td>Left Line 12</td></tr>
       <tr><td>Left Line 13</td></tr>
       <tr><td>Left Line 14</td></tr>
       <tr><td>Left Line 15</td></tr>
       <tr><td>Left Line 16</td></tr>
       <tr><td>Left Line 17</td></tr>
       <tr><td>Left Line 18</td></tr>
       <tr><td>Left Line 19</td></tr>
       <tr><td>Left Line 20</td></tr>
       <tr><td>Left Line 21</td></tr>
       <tr><td>Left Line 22</td></tr>
       <tr><td>Left Line 23</td></tr>
       <tr><td>Left Line 24</td></tr>
       <tr><td>Left Line 25</td></tr>
       <tr><td>Left Line 26</td></tr>
       <tr><td>Left Line 27</td></tr>
       <tr><td>Left Line 28</td></tr>
       <tr><td>Left Line 29</td></tr>
       <tr><td>Left Line 30</td></tr>
       <tr><td>Left Line 31</td></tr>
       <tr><td>Left Line 32</td></tr>
       <tr><td>Left Line 33</td></tr>
       <tr><td>Left Line 34</td></tr>
       <tr><td>Left Line 35</td></tr>
       <tr><td>Left Line 36</td></tr>
       <tr><td>Left Line 37</td></tr>
       <tr><td>Left Line 38</td></tr>
       <tr><td>Left Line 39</td></tr>
       <tr><td>Left Line 40</td></tr>
   </table>
</div>
<div class="scrollSync" id="2">
    <table>
       <tr><td>Right Line 1</td></tr>
       <tr><td>Right Line 2</td></tr>
       <tr><td>Right Line 3</td></tr>
       <tr><td>Right Line 4</td></tr>
       <tr><td>Right Line 5</td></tr>
       <tr><td>Right Line 6</td></tr>
       <tr><td>Right Line 7</td></tr>
      ...

CSS

/* use whatever method you want to put the tables side-by-side */
.scrollSync {
    float: left;
    width: 50%;
    height: 100px;
    overflow: auto;
    border: 1px solid black;
    box-sizing: border-box;
}

.scrollSync2 {
    width: 100%;
    float: clear;
    height: 100px;
    overflow: auto;
    border: 1px solid black;
    box-sizing: border-box;
}
.scrollSync2 table td{
    min-width: 80px;
}

TABLE {
    width: 100%;
}

TR:nth-child(even) TD {
    background: #eef;
}

JavaScript

function scrollSync(selector) {
  let active = null;
  document.querySelectorAll(selector).forEach(function(div) {
    div.addEventListener("mouseenter", function(e) {
      active = e.target;
    });

    div.addEventListener("scroll", function(e) {
      if (e.target !== active) return;

      document.querySelectorAll(selector).forEach(function(target) {
        if (active === target) return;

        target.scrollTop = active.scrollTop;
        target.scrollLeft = active.scrollLeft;
      });
    });
  });
}

//RWM: Call the function on the elements you need synced.
scrollSync(".scrollSync");
scrollSync(".scrollSync2");