Блог

Главная - Вопросы по программированию - Как прокручивать по вертикали в одном div и в то же время влиять на другой div, который прокручивается по горизонтали

Как прокручивать по вертикали в одном div и в то же время влиять на другой div, который прокручивается по горизонтали

#javascript #css #scroll

#javascript #css #прокрутка

Вопрос:

У меня есть 2 div, A и B, мне нужен способ, чтобы при вертикальной прокрутке в A div B одновременно перемещался в горизонтальном направлении.

Я искал и не могу найти решение этой проблемы, и, если возможно, решение без фреймворка.

нажмите здесь, чтобы увидеть, что я имею в виду на картинке

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

Комментарии:

1. Вам нужно сделать это с помощью JavaScript. По сути, вы добавляете EventListener в один из ваших контейнеров, обнаруживая события прокрутки. Затем вы имитируете прокрутку другого контейнера.

Ответ №1:

Для этого вам нужно будет прослушать прокрутку в розовом div с помощью jQuery. Вот приблизительная оценка:

 $(".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>

Надеюсь, код имеет достаточно смысла.

Комментарии:

1. Я все еще пытаюсь сделать это без Jquery, если у меня не получится, я воспользуюсь вашим кодом, спасибо.