Question

我每个表有2个div。底部div滚动时尝试使其保持同步。我绑定了onscroll事件，当它触发时，我调整了第一个表的位置。在ie11，chrome，firefox中可以正常工作。在边缘，在onscroll事件触发之前进行滚动时会有很大的延迟，并且存在明显的延迟。最终，这2个表的位置被同步了起来，但是在onscroll事件最终触发之前，它看起来半秒钟太可怕了。有任何解决方法的想法吗？

https://jsfiddle.net/hoffm263/Lcxv3164/6/#&togetherjs=AVVaUkC93B

$(document).ready(function() {

  $("#d1").on("scroll", function(e) {
    console.log(new Date());
    //adjust h1 position
    $("#h1").scrollLeft($(e.target).scrollLeft());
  });
});

td {
  border: solid black 1px;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
}

tbody {
  display: block;
}

#h1 {
  width: 317px;
  overflow: hidden;
}

#d1 {
  height: 200px;
  overflow: auto;
  width: 317px;
}

#d1 table {
  width: 400px;
}

#h1 table {
  width: 417px;
}

#h1 td:nth-child(1) {
  width: 100px;
  background-color: #AAAAAA;
}

#h1 td:nth-child(2) {
  width: 50px;
  background-color: #CCCCCC;
}

#h1 td:nth-child(3) {
  width: 267px;
  background-color: #EEEEEE;
}

#d1 td:nth-child(1) {
  width: 100px;
  background-color: #AAAAAA;
}

#d1 td:nth-child(2) {
  width: 50px;
  background-color: #CCCCCC;
}

#d1 td:nth-child(3) {
  width: 250px;
  background-color: #EEEEEE;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <div id="h1">
    <table>
      <tr>
        <td>11111fasdfas</td>
        <td>2 222</td>
        <td>33333333</td>
      </tr>
    </table>
  </div>
  <div id="d1">
    <table>
      <tr>
        <td>111asfasdfasdfafasdasdf11 adf adf a df 111</td>
        <td>2222 sdaf dsd f222 222</td>
        <td>33333 da fsfd as333</td>
      </tr>
      <tr>
        <td>111asfasdfasdfafasdasdf11 adf adf a df 111</td>
        <td>2222 sdaf dsd f222 222</td>
        <td>33333 da fsfd as333</td>
      </tr>
      <tr>
        <td>111asfasdfasdfafasdasdf11 adf adf a df 111</td>
        <td>2222 sdaf dsd f222 222</td>
        <td>33333 da fsfd as333</td>
      </tr>
      <tr>
        <td>111asfasdfasdfafasdasdf11 adf adf a df 111</td>
        <td>2222 sdaf dsd f222 222</td>
        <td>33333 da fsfd as333</td>
      </tr>
      <tr>
        <td>111asfasdfasdfafasdasdf11 adf adf a df 111</td>
        <td>2222 sdaf dsd f222 222</td>
        <td>33333 da fsfd as333</td>
      </tr>
    </table>
  </div>

Answer 1

这里的问题是您的事件监听器多次触发。这会导致浏览器出现滞后，因为您的代码试图在短时间内完成大量工作。添加滚动事件时，您需要使用油门或防反弹功能=> https://www.npmjs.com/package/throttle-debounce

MS Edge滚动慢

1 个答案: