Question

我有两个表，一个是只包含表头的表，另一个表包含所有表数据。两个表都在他们自己独立的div中。我试图这样做，以便在表格数据div上水平滚动将触发JavaScript中的事件，该事件将以相同的速率滚动表格标题div。我知道我可以摆脱div并且只有一个带有粘性标题的表，但我想尝试这样做。这是我认为可行的代码的简化版本：

HTML：

<div id = "div1">
  <table id = "stickyheaders" class = "table table-condensed table-striped small">
    <thead><tr>
      <th>header1</th>
      <th>header2</th>
      <th>header3</th>
      <th>header4</th>
      <th>header5</th>
      <th>header6</th>
      <th>header7</th>
      <th>header8</th>
      <th>header9</th>
      <th>header10</th>
    </tr></thead>
  </table>
</div>

<div id = "div2">
  <table id = "tablebody" class = "table table-condensed table-striped small">
    <tbody>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
        <td>data6</td>
        <td>data7</td>
        <td>data8</td>
        <td>data9</td>
        <td>data10</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript的：

$(document).ready(function() {
    $('#div2').on('scroll', function () {
        $('#').scrollLeft($(this).scrollLeft());
    });
} )();

这里是fiddle

我在这里错过了一些愚蠢的东西吗？在此先感谢您的帮助。我知道这与此处提出的另一个问题类似，但是那个人没有答案，并没有真正帮助我。

Answer 1

您缺少核心滚动内容。将$('#')替换为右侧id，然后删除末尾的()。是的，添加jQuery：

＆＃13;

$(document).ready(function() {
  $('#div2').on('scroll', function() {
    $('#div1').scrollLeft($(this).scrollLeft());
  });
});

＆＃13;

#div1 {
  width: 50%;
  height: 40px;
  padding: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 5px;
  overflow-y: auto;
  overflow-x: auto;
  label {
    display: block;
  }
  tr:after {
    content: ' ';
    display: block;
    visibility: auto;
    clear: both;
  }
}
#div2 {
  width: 50%;
  height: 50px;
  padding: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 5px;
  overflow-y: auto;
  overflow-x: auto;
  label {
    display: block;
  }
  tr:after {
    content: ' ';
    display: block;
    visibility: auto;
    clear: both;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <table id="stickyheaders" class="table table-condensed table-striped small">
    <thead>
      <tr>
        <th>header1</th>
        <th>header2</th>
        <th>header3</th>
        <th>header4</th>
        <th>header5</th>
        <th>header6</th>
        <th>header7</th>
        <th>header8</th>
        <th>header9</th>
        <th>header10</th>
      </tr>
    </thead>
  </table>
</div>

<div id="div2">
  <table id="tablebody" class="table table-condensed table-striped small">
    <tbody>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
        <td>data6</td>
        <td>data7</td>
        <td>data8</td>
        <td>data9</td>
        <td>data10</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

滚动底部div将滚动顶部div。将jQuery添加到jsFiddle。

小提琴：https://jsfiddle.net/2xt1p8t7/

Answer 2

我在尝试回答我自己的问题时遇到了这个问题。

稍微扩展的解决方案。我试图以类似的方式链接两个 div，以便一个与另一个滚动。这是初始代码（两个 div 都有一个名为 joinscroll 的类）。

$('.joinscroll').on('scroll touchmove mousemove', function(e){
  if ($(this).attr("id") == "topdiv")  { $('#bottomdiv').scrollLeft($(this).scrollLeft()); }
  if ($(this).attr("id") == "bottomdiv")  { $('#topdiv').scrollLeft($(this).scrollLeft()); }
})

我遇到的问题是，在滚动期间，浏览器检测到该函数滚动的 div 上的滚动，这导致该函数为该 div 的滚动执行。这导致了非常生涩的滚动，主要是因为有一个反馈循环。

我尝试了 preventDefault 和 stopPropagation 的技巧，但没有奏效。

最后，最简单的解决方案是检测鼠标悬停在哪个 div 上并使用它来抑制其他功能：

$('.joinscroll').on('scroll touchmove mousemove', function(e){
if ($(this).is(':hover')) {
  if ($(this).attr("id") == "topdiv")  { $('#bottomdiv').scrollLeft($(this).scrollLeft()); }
  if ($(this).attr("id") == "bottomdiv")  { $('#topdiv').scrollLeft($(this).scrollLeft()); }
}  
})

希望这对某人有所帮助。

链接水平滚动与两个分区

2 个答案: