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>

如何使用AngularJS同时滚动两行

1 个答案: