单个滚动在不同的div中有2个相同的布局？

Question

我在页面上有两个带有表格结构的div。我想让它们响应，目前唯一的方法是在某一点之后放置水平滚动。这些div在不同的包装器/容器中，所以不能在一个包装器中移动它们。 我的问题是我只想要一个horizo​​ntall滚动而不是两个。这样做的最佳方法是什么？这样它们就有一个水平移动的滚动条。

  

以下是我正在尝试的（问题）

＆＃13;

＆＃13;

* {
  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
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

* {
  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
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;