Question

编辑3：我认为这是我最接近的..因为这是反应，我在构造函数中添加了一个事件监听器：

componentDidMount() {
    const self = this;
    Array.from(document.getElementsByClassName('scroll-content')).forEach((element) => {
      element.addEventListener('scroll',
        () => self.scrollDivsTogether(element.parentElement.parentElement.id));
    });
  }

然后我的功能就像这样：

scrollDivsTogether(id) {
    const opt = $('#options-column>table>tbody.scroll-content');
    const cont = $('#options-contents>table>tbody.scroll-content');

    if (cont.scrollTop() !== opt.scrollTop()) {
      if (id === 'options-column') {
        cont.scrollTop(opt.scrollTop());
      } else {
        opt.scrollTop(cont.scrollTop());
      }
    }
  }

它仍会在两个事件上触发，但会少一点。我不知道怎么把它变成小提琴......也许我需要在某个地方添加延迟？

另外，我的HTML看起来像这样：

<div id='table-container'>
  <div id='options-column'>
    <table>
      <thead class='fixed-header'>
        <tr>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody class='scroll-content'>
        <tr>
          <td>h1</td>
        </tr>
        <!-- more tr's here -->
      </tbody>
    </table>
  </div>

  <div id='options-contents'>
    <table>
      <thead class='fixed-header'>
        <tr>
          <th>A1</th>
          <th>A2</th>
          <th>A3</th>
        </tr>
      </thead>
      <tbody class='scroll-content'>
        <tr>
          <td>a1</td>
          <td>a2</td>
          <td>a3</td>
        </tr>
        <!-- more tr's here -->
      </tbody>
    </table>
  </div>
</div>

编辑2： 我确实制作了fiddle，但它没有使用＆＃34; onscroll＆＃34;事件，我不确定如何在React中进行纯JS调用...无论如何，一个工作的jquery是here，但我想知道这是否滞后因为我使用的是onscroll？

编辑1：我认为该函数符合@Lokman Hakim的建议，但在我的结尾却非常不稳定。

scrollDivsTogether() {
  $('.scroll-content').on('scroll', (e) => {
    const ele = $(e.currentTarget);
    const top = ele.scrollTop();

    if (ele.parent().parent().attr('id') === 'options-contents') {
      // already scrolled contents, scroll only the column
      $('#options-column>table>tbody.scroll-content').scrollTop(top);

      // already scrolled column, scroll only the contents
    } else {
      $('#options-contents>table>tbody.scroll-content').scrollTop(top);
    }
  });
}

原件：

我目前使用的代码效果相当不错：

HTML（实际上是jsx文件）：

    <div id='table-container' onScroll={this.scrollDivsTogether}>
      <div id='options-column'>
        <table>
          <BuildHeader ... /> <!-- consists of a thead of class fixed-header--> 
          <BuildRows ... /><!-- consists of a thead of class scroll-content --> 
        </table>
      </div>

      <div id='options-contents'>
        <table>
          <BuildHeader ... /> <!-- consists of a thead of class fixed-header--> 
          <BuildRows ... /><!-- consists of a tbody of class scroll-content --> 
        </table>
      </div>
    </div>

CSS：

#table-container {
    overflow: hidden;
    &:hover {
        overflow-x: overlay;
    }
}
.fixed-header tr {
    position: relative;
    display: block;
}
.scroll-content {
    display: block;
    overflow: overlay;
    width: 100%;
}
#options-column {
    border: solid 1px $lightBlue;
    position: fixed;
    max-width: 240px;
    min-width: 240px;
    width: 240px;
    overflow: hidden;
    z-index: 1;
}
#options-contents {
    overflow: visible;
    margin-left: 240px;
    z-index: -1;
}

使用Javascript：

scrollDivsTogether() {
  const opt = $('#options-column>table>tbody.scroll-content');
  const cont = $('#options-contents>table>tbody.scroll-content');

  opt.on('scroll', function () {
    cont.scrollTop($(this).scrollTop());
  });

  cont.on('scroll', function () {
    opt.scrollTop($(this).scrollTop());
  });

现在，这段代码合理地起作用了，但它有时会很滞后，有时会像这样陷入困境（线条应该对齐）：

在我应该能够阻止其他回调时，在一个回调中触发scrolltop会触发另一个回调中的scrolltop，这也让我非常困扰。我已经尝试了所有我能想到的东西......帮助？

my site如果你想看到它，那就是https://www.w3schools.com/sql/trysql.asp?filename=trysql_op_or＆＃34; （从列表中选择一个表格）。

Answer 1

试试看看这个链接

https://www.jsnippet.net/snippet/332/Scrolling-two-divs-at-the-same-time

Answer 2

试试这个怎么样？可能不是最佳的。以下是代码https://www.jsnippet.net/snippet/1381/2/Scrolling-two-divs-at-the-same-time的摘要 https://jsfiddle.net/1tv8bkyc/8/

var optTimeout, contTimeout;

opt.on('scroll', function () {
  if(contTimeout) return;
  if(optTimeout) clearTimeout(optTimeout);
  optTimeout = setTimeout(function () {
     if(optTimeout) {
       clearTimeout(optTimeout);
       optTimeout = null;
     }
    }, 50);
  cont.scrollTop($(this).scrollTop());
});

cont.on('scroll', function () {
  if(optTimeout) return;
  if(contTimeout) clearTimeout(contTimeout);
  contTimeout = setTimeout(function() {
     if(contTimeout) {
       clearTimeout(contTimeout);
       contTimeout = null;
     }
  }, 50);
  opt.scrollTop($(this).scrollTop());
});

setTimeout是这样的，当你滚动一个元素时，另一个元素不会激活滚动事件。对于上面的问题，请确保只运行一次“this.scrollDivsTogether”方法，如果您正在使用react，则可能在componentDidMount中运行

在jquery

2 个答案: