How to scroll two rows simultaneously?

Issue

I have two tables in different div.This tables use for compare records in table rows.This two tables have two scroll bars.I want to scroll these two scrollbar simultaneously.Someone please help me on linking two scrollbars perfectly.

function SyncScroll(phoneFaceId) {
  var face1 = document.getElementById("phoneface1");
  var face2 = document.getElementById("phoneface2");
  if (phoneFaceId=="phoneface1") {
    face2.scrollTop = face1.scrollTop;
  }
  else {
    face1.scrollTop = face2.scrollTop;
  }
}

div {
    display:inline-block;
    height:100px;
    width:200px;
    overflow:auto;
}
td {
    font-size:40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js"></script>
<div>
    <table id="phoneface2" onscroll="SyncScroll('phoneface1')">
        <tr><td>TEST</td></tr>
        <tr><td>TEST</td></tr>
        <tr><td>TEST</td></tr>
        <tr><td>TEST</td></tr>
        <tr><td>TEST</td></tr>
    </table>
</div>

<div>
    <table id="phoneface2" onscroll="SyncScroll('phoneface2')">
        <tr><td>TEST</td></tr>
        <tr><td>TEST</td></tr>
        <tr><td>TEST</td></tr>
        <tr><td>TEST</td></tr>
        <tr><td>TEST</td></tr>
    </table>
</div>

Solution

You need to apply the logic to the div not the table because the div has the overflow and the scroll

function SyncScroll(phoneFaceId) {
  var face1 = document.getElementById("phoneface1");
  var face2 = document.getElementById("phoneface2");
  if (phoneFaceId=="phoneface1") {
    face2.scrollTop = face1.scrollTop;
  }
  else {
    face1.scrollTop = face2.scrollTop;
  }
}

div {
    display:inline-block;
    height:100px;
    width:200px;
    overflow:auto;
}
td {
    font-size:40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js"></script>
<div id="phoneface1" onscroll="SyncScroll('phoneface1')">
    <table >
        <tr><td>TEST</td></tr>
        <tr><td>TEST</td></tr>
        <tr><td>TEST</td></tr>
        <tr><td>TEST</td></tr>
        <tr><td>TEST</td></tr>
    </table>
</div>

<div id="phoneface2" onscroll="SyncScroll('phoneface2')">
    <table >
        <tr><td>TEST</td></tr>
        <tr><td>TEST</td></tr>
        <tr><td>TEST</td></tr>
        <tr><td>TEST</td></tr>
        <tr><td>TEST</td></tr>
    </table>
</div>

Answered By - Temani Afif