#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, если у меня не получится, я воспользуюсь вашим кодом, спасибо.