Установка scrollTop делает прокрутку очень медленной - PullRequest
Новая
       0

Установка scrollTop делает прокрутку очень медленной

0 голосов
/ 17 июня 2020

У меня 2 дива один за другим. Когда я прокручиваю div 1, тогда div2 также должен прокручиваться, и то же самое, если я прокручиваю div2, тогда div1 должен прокручиваться. Я реализовал это, установив значение scrollTop для div 1 на div2 и div2 на div1. Но проблема здесь в том, что событие прокрутки запускается несколько раз, и прокрутка происходит очень медленно. Я создал живую демонстрацию, может ли кто-нибудь мне помочь? 

(function() {
  var target = $("#tableFixed");
  $("#tableLista").scroll(function(e) {
    target.prop("scrollTop", this.scrollTop)
      .prop("scrollLeft", this.scrollLeft);
    e.preventDefault();
  });

  var target1 = $("#tableLista");
  $("#tableFixed").scroll(function(e) {
    target1.prop("scrollTop", this.scrollTop)
      .prop("scrollLeft", this.scrollLeft);
    e.preventDefault();
  });

})();
.divScrollDiv {
  display: inline-block;
  width: 10%;
  border: 1px solid black;
  height: 100px;
  overflow: scroll;
}

.tableNoScroll {
  overflow: hidden;
  overflow-y: scroll;
}
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

  <body>
    <p>Scroll the left div, watch the right one.</p>

    <table id="tableFixed" class="divScrollDiv tableNoScroll">
      <tbody>
        <tr>
          <td>00</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
        </tr>
        <tr>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
        </tr>
        <tr>
          <td>8</td>
        </tr>
        <tr>
          <td>9</td>
        </tr>
        <tr>
          <td>10</td>
        </tr>
        <tr>
          <td>11</td>
        </tr>
        <tr>
          <td>12</td>
        </tr>
        <tr>
          <td>13</td>
        </tr>
        <tr>
          <td>14</td>
        </tr>
        <tr>
          <td>15</td>
        </tr>
        <tr>
          <td>16</td>
        </tr>
        <tr>
          <td>17</td>
        </tr>
        <tr>
          <td>18</td>
        </tr>
        <tr>
          <td>19</td>
        </tr>
      </tbody>
    </table>

    <table id="tableLista" class="divScrollDiv">
      <tbody>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
      </tbody>
    </table>

  </body>

</html>

1 Ответ

1 голос
/ 17 июня 2020

Вам нужна какая-то блокировка для предотвращения запуска scroll в циклах. Простая примитивная блокировка может отслеживать, на какую таблицу вы наводите курсор, и запускать синхронизацию только для этого элемента. 

  var scrollSource;
  var setScrollSource = function() {
    scrollSource = this;
  }
  target.hover(setScrollSource);
  target1.hover(setScrollSource);

  target.scroll(function (e) {
    if (this !== scrollSource) {
      return;
    }
    // sync logic
  }

  target1.scroll(function (e) {
    if (this !== scrollSource) {
      return;
    }
    // sync logic
  }


(function () {
  var target = $("#tableFixed");
  var target1 = $("#tableLista");

  var scrollSource;
  var setScrollSource = function() {
    scrollSource = this;
  }
  target.hover(setScrollSource);
  target1.hover(setScrollSource);

  target1.scroll(function (e) {
    if (this !== scrollSource) {
      return;
    }
    target
      .prop("scrollTop", this.scrollTop)
      .prop("scrollLeft", this.scrollLeft);
    e.preventDefault();
  });

  target.scroll(function (e) {
    if (this !== scrollSource) {
      return;
    }
    target1
      .prop("scrollTop", this.scrollTop)
      .prop("scrollLeft", this.scrollLeft);
    e.preventDefault();
  });
})();
.divScrollDiv {
  display: inline-block;
  width: 10%;
  border: 1px solid black;
  height: 100px;
  overflow: scroll;
}

.tableNoScroll {
  overflow: hidden;
  overflow-y: scroll;
}
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<body>
  <p>Scroll the left div, watch the right one.</p>

  <table id="tableFixed" class="divScrollDiv tableNoScroll">
    <tbody>
      <tr>
        <td>00</td>
      </tr>
      <tr>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
      </tr>
      <tr>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
      </tr>
      <tr>
        <td>8</td>
      </tr>
      <tr>
        <td>9</td>
      </tr>
      <tr>
        <td>10</td>
      </tr>
      <tr>
        <td>11</td>
      </tr>
      <tr>
        <td>12</td>
      </tr>
      <tr>
        <td>13</td>
      </tr>
      <tr>
        <td>14</td>
      </tr>
      <tr>
        <td>15</td>
      </tr>
      <tr>
        <td>16</td>
      </tr>
      <tr>
        <td>17</td>
      </tr>
      <tr>
        <td>18</td>
      </tr>
      <tr>
        <td>19</td>
      </tr>
    </tbody>
  </table>

  <table id="tableLista" class="divScrollDiv">
    <tbody>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
      </tr>
    </tbody>
  </table>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...