MS Edge Onscroll Laggy - PullRequest
Новая
       2

MS Edge Onscroll Laggy

0 голосов
/ 25 июня 2019

У меня есть 2 div с таблицей. Попытка синхронизировать их, когда прокручивается нижний блок. У меня есть событие onscroll, и когда оно срабатывает, я корректирую положение первой таблицы. Отлично работает в ie11, chrome, firefox. В крайнем случае при прокрутке до срабатывания события onscroll происходит огромная задержка, и есть заметная задержка. В конечном итоге позиции двух таблиц синхронизируются, но это выглядит ужасно в течение полсекунды, пока событие 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>

1 Ответ

0 голосов
/ 25 июня 2019

Проблема в том, что ваш прослушиватель событий запускается несколько раз. Это вызывает задержку в работе браузера, поскольку ваш код пытается выполнить большую работу за небольшое количество времени. Когда вы добавляете события прокрутки, вам нужно использовать функции throttle или debounce => https://www.npmjs.com/package/throttle-debounce

...