如何在一个div中垂直滚动，同时影响另一个水平滚动的div

Question

我有2个div，A和B，我需要一种方法，当我在A中垂直滚动时，div B也会在水平方向同时移动。

我搜索并找不到解决此问题的方法，如果可能的话，找不到没有框架的解决方案。

click here to see what I mean in on picture

response => response.json()

.content-up-down {
	background: pink;
	margin: auto;
	width : 400px;
	height: 300px;
	overflow-y: scroll;
}

.content-1 {
	background: rgb(250,230,230);
	padding : 32px;
	margin: 16px;
}

.content-left-right {
	background: rgb(200,250,200);
	margin: auto;
	margin-top:32px;
	padding-top: 16px;
	
	width : 400px;
	height: 96px;
	overflow-x: scroll;
	overflow-y: hidden;
}

.wrap-content-2 {
	white-space: nowrap;
}

.content-2 {
	background: rgb(100,255,150);
	display: inline-block;
	width:64px;
	height: 64px;
	margin:0px 32px;
}

Answer 1

为此，你需要使用jQuery监听粉色div上的滚动。这是一个粗略的估计：

$(".pink").scroll(function() {
  $(".green").scrollLeft(($(".pink").scrollTop() / $(".pink").height()) * $(".green").width());
});

.pink {
  background-color: pink;
  height: 100px;
  overflow-y: scroll;
  padding: 10px;
 }

.green {
  background-color: green;
  height: 25px;
  overflow-x: scroll;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pink">
 a
 <br>
  b
  <br>
  c
  <br>
  d
  <br>
  a
  <br>
  b
  <br>
  c
  <br>
  d
  <br>
  a
  <br>
  b
  <br>
  c
  <br>
  d
  <br>
  a
  <br>
  b
  <br>
  c
  <br>
  d
  <br>
  a
  <br>
  b
  <br>
  c
  <br>
  d
  <br>
</div>

<div class="green">   efghefghefghefghefghefghefghefghefghefghefghefghefghefghefefghefghefghefghefghefghefghefghefghefghefghefghefghefghefefghefghefghefghefghefghefghefghefghefghefghefghefghefghefefghefghefghefghefghefghefghefghefghefghefghefghefghefghefefghefghefghefghefghefghefghefghefghefghefghefghefghefghef
</div>

希望代码足够有意义。