如何同时滚动两行？

cgvd09ve 于 2022-10-24 发布在 Angular

关注(0)|答案(2)|浏览(141)

我有两个不同目录的表。这两个表用于比较表行中的记录。这两个表有两个滚动条。我想同时滚动这两个滚动条。有人能帮我完美地连接两个滚动条吗？

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>

angularjs

来源：https://stackoverflow.com/questions/56998752/how-to-scroll-two-rows-simultaneously

2条答案

按热度按时间

lqfhib0f1#

您需要将逻辑应用于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>

赞(0）回复(0）举报 2022-10-24

xtfmy6hx2#

当使用above example遇到水平滚动问题时，请将其替换为：