单滚动在不同的div中的2个相同的布局? [英] Single scroll for 2 same layouts in different div?

问题描述

我在页面上有2个具有表格结构的div.我想让它们具有响应性，目前唯一的方法是将水平滚动放置在某个点之后.div位于不同的包装器/容器中，因此无法在单个包装器中移动它们. 我的问题是我只需要一个水平滚动条，而不是两个.最好的方法是什么?，以便他们可以滚动一个滚动条来水平移动两个滚动条.

I have 2 divs with table like structure on a page. I want to make them responsive and currently the only way is to put horizontal scroll after a certain point .The divs are in different wrappers/container so can't move them in a single wrapper. My problem is I want only one horizontall scroll rather than two. What is the best way to do this? so that they have one scroll to move both horizontally.

下面是我正在尝试的(问题)

Below is what I am trying (the issue)

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

推荐答案

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

Get scroll left of currently scrolling div and then bind it to other 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>

这篇关于单滚动在不同的div中的2个相同的布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！