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

Question

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

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

click here to see what I mean in on picture

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

<div class="content-up-down">
			<div class="content-1"> </div>
			<div class="content-1"> </div>
			<div class="content-1"> </div>
			<div class="content-1"> </div>
			<div class="content-1"> </div>
			<div class="content-1"> </div>
			<div class="content-1"> </div>
			<div class="content-1"> </div>
			<div class="content-1"> </div>
			<div class="content-1"> </div>
			<div class="content-1"> </div>
			<div class="content-1"> </div>
			<div class="content-1"> </div>
			<div class="content-1"> </div>
			<div class="content-1"> </div>	
		</div>

		<div class="content-left-right">
			<div class="wrap-content-2">
				<div class="content-2"> </div>
				<div class="content-2"> </div>
				<div class="content-2"> </div>
				<div class="content-2"> </div>
				<div class="content-2"> </div>
				<div class="content-2"> </div>
				<div class="content-2"> </div>
				<div class="content-2"> </div>
				<div class="content-2"> </div>
				<div class="content-2"> </div>
				<div class="content-2"> </div>
			</div>
		</div>

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>

希望代码足够有意义。