单个滚动用于不同div中的2个相同布局

Question

我有 2 个div，页面上有类似表格的结构。我想使它们响应迅速，目前唯一的方法是将水平滚动放在某个点之后。div 位于不同的包装器/容器中，因此无法在单个包装器中移动它们。我的问题是我只想要一个水平滚动而不是两个。最好的方法是什么？这样他们有一个滚动轴可以水平移动两者。

以下是我正在尝试的(问题(

* {
  margin: 0px;
  padding: 0px;
}
.ScrollWrapper1 {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  float: left;
}
.ScrollWrapper2 {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  float: left;
}
.TableHead {
  width: 100%;
  overflow: hidden;
  float: left;
}
.row {
  float: left;
  width: calc(10% - 1px);
  text-align: center;
  border-right: 1px solid #ccc
}
.marginTop40 {
  margin-top: 40px;
}
.ScrollWrapper h1 {
  margin: 20px 0;
}
@media(max-width:1024px) {
  .TableHead {
    width: 1024px;
    overflow: hidden
  }
}

<div class="ScrollWrapper1">
<h1>Div on page with table format</h1>
  <div class="TableHead">
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
  </div>
</div>
<div class="ScrollWrapper2 marginTop40">
  <h1>Another div on page with table format</h1>
  <div class="TableHead">
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
  </div>
</div>

Answer 1

获取当前滚动的div 的左侧滚动，然后将其绑定到其他div

$('.ScrollWrapper').on('scroll', function(){
  var _left = $(this).scrollLeft();
  $('.ScrollWrapper').scrollLeft(_left)
})

* {
  margin: 0px;
  padding: 0px;
}
.ScrollWrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  float: left;
}
.TableHead {
  width: 100%;
  overflow: hidden;
  float: left;
}
.row {
  float: left;
  width: calc(10% - 1px);
  text-align: center;
  border-right: 1px solid #ccc
}
.marginTop40 {
  margin-top: 40px;
}
.ScrollWrapper h1 {
  margin: 20px 0;
}
@media(max-width:1024px) {
  .TableHead {
    width: 1024px;
    overflow: hidden
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ScrollWrapper">
<h1>Div on page with table format</h1>
  <div class="TableHead">
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
    <div class="row">Table 1</div>
  </div>
</div>
<div class="ScrollWrapper marginTop40">
  <h1>Another div on page with table format</h1>
  <div class="TableHead">
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
    <div class="row">Table 2</div>
  </div>
</div>