title: How to scroll two rows simultaneously?
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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;
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
      display:inline-block;
      height:100px;
      width:200px;
      overflow:auto;
  }
  td {
      font-size:40px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;
      &lt;table id="phoneface2" onscroll="SyncScroll('phoneface1')"&gt;
          &lt;tr&gt;&lt;td&gt;TEST&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;TEST&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;TEST&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;TEST&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;TEST&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;table id="phoneface2" onscroll="SyncScroll('phoneface2')"&gt;
          &lt;tr&gt;&lt;td&gt;TEST&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;TEST&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;TEST&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;TEST&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;TEST&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>