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

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

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

* { 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 on page with table format
 
 
Table 1
 
Table 1
 
Table 1
 
Table 1
 
Table 1
 
Table 1
 
Table 1
 
Table 1
 
Table 1
 
Table 1
 
 
 
 
Another div on page with table format
 
 
Table 2
 
Table 2
 
Table 2
 
Table 2
 
Table 2
 
Table 2
 
Table 2
 
Table 2
 
Table 2
 
Table 2
 
  

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

  
 
Div on page with table format
 
 
Table 1
 
Table 1
 
Table 1
 
Table 1
 
Table 1
 
Table 1
 
Table 1
 
Table 1
 
Table 1
 
Table 1
 
 
 
 
Another div on page with table format
 
 
Table 2
 
Table 2
 
Table 2
 
Table 2
 
Table 2
 
Table 2
 
Table 2
 
Table 2
 
Table 2
 
Table 2