Javascript 带两个div的链接水平滚动

我有两个表，一个表只有表头，另一个表包含所有表数据。两个表都在各自的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>

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

这是我的答案

---

我是不是错过了什么蠢事？提前感谢你的帮助。我知道这类似于这里问的另一个问题，但这个问题没有答案，也没有真正帮助我。

您缺少核心滚动内容。将

$（'#'）

替换为右侧的

id

，并移除末尾的

（）

。是的，添加jQuery：

$（文档）.ready（函数（）{
$（'#div2'）。在（'scroll'，function（）上{
$（'#div1'）.scrollLeft（$（this.scrollLeft（））；
});
});
#第1部分{
宽度：50%；
高度：40px；
填充：10px；
边框：1px实心#C0C0；
边界半径：5px；
溢出y：自动；
溢出-x：自动；
标签{
显示：块；
}
tr：之后{
内容：''；
显示：块；
能见度：自动；
明确：两者皆有；
}
}
#第二组{
宽度：50%；
高度：50px；
填充：10px；
边框：1px实心#C0C0；
边界半径：5px；
溢出y：自动；
溢出-x：自动；
标签{
显示：块；
}
tr：之后{
内容：''；
显示：块；
能见度：自动；
明确：两者皆有；
}
}

校长1
校长2
校长3
校长4
校长5
校长6
校长7
校长8
校长9
校长10
数据1
数据2
数据3
数据4
数据5
数据6
数据7
数据8
数据9
数据10
我在回答自己的问题时遇到了这个问题

稍微膨胀的溶液。我试图以类似的方式链接两个div，这样一个可以滚动另一个。以下是初始代码（两个div都有一个名为joinscroll的类）

我遇到的问题是，在滚动过程中，浏览器检测到该函数正在滚动的div上的滚动，这导致为该div的滚动执行该函数。这导致了非常不稳定的滚动，基本上是因为有一个反馈循环

我尝试了使用preventDefault和StopperPogation的技巧，但都不起作用

最后，最简单的解决方案是检测鼠标悬停在哪个div上，并使用该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()); }
}  
})

希望这对某人有所帮助。
您缺少这里的
$（'#id'）
。我认为这里缺少费率方面。也许做一些数学计算出相对百分比会有所帮助？@SunnyPatel说的没错。但一开始，代码片段本身不起作用。在滚动第二个
div
时对我起作用。哇，一直以来都是两个愚蠢的错误。经典谢谢你的回答，现在一切正常。@PraveenKumar当然！他们让你等了那么长时间才接受。
$('.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()); }
}  
})