Как прокрутить две строки одновременно, используя Angularjs

Question

У меня есть две таблицы в разных div. Эти таблицы используются для сравнения записей в строках таблиц. У этих двух таблиц есть две полосы прокрутки. Я хочу прокрутить эти две полосы прокрутки одновременно. *

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>

Answer 1

Вам необходимо применить логику к div, а не к таблице, потому что div имеет переполнение и прокрутку

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>