Перемещать элементы в div по горизонтали при вертикальной прокрутке
Мне было интересно, можно ли перемещать элементы, такие как изображения в div, для перемещения строго по горизонтали, когда пользователь прокручивает вертикально в этом div? Я могу представить, что есть решение для javascript, но я просто не знаю, что это было бы.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Способ горизонтального перемещения при вертикальной прокрутке - контейнер. Сначала поверните контейнер на 90 градусов против часовой стрелки, а затем поверните дочерние элементы внутри контейнера на 90 градусов по часовой стрелке.
Таким образом, контейнер при вертикальной прокрутке будет фактически перемещаться горизонтально по отношению к странице, в то время как элементы в нем будут перемещаться вниз по отношению к контейнеру.
::-webkit-scrollbar{width:2px;height:2px;}
::-webkit-scrollbar-button{width:2px;height:2px;}
div{
box-sizing:border-box;
}
body {
background: #111;
}
.horizontal-scroll-wrapper{
position:absolute;
display:block;
top:0;
left:0;
width:80px;
max-height:500px;
margin:0;
background:#abc;
overflow-y:auto;
overflow-x:hidden;
transform:rotate(-90deg) translateY(-80px);
transform-origin:right top;
}
.horizontal-scroll-wrapper > div{
display:block;
padding:5px;
background:#cab;
transform:rotate(90deg);
transform-origin: right top;
}
.squares{
padding:60px 0 0 0;
}
.squares > div{
width:60px;
height:60px;
margin:10px;
}<div class = "horizontal-scroll-wrapper squares">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
<div>item 5</div>
<div>item 6</div>
<div>item 7</div>
<div>item 8</div>
<div>item 9</div>
<div>item 10</div>
<div>item 11</div>
<div>item 12</div>
<div>item 13</div>
<div>item 14</div>
<div>item 15</div>
<div>item 16</div>
</div>P.S. Хотя я действительно думаю, что это можно легко сделать с помощью javascript, я лично не знаю, как это сделать.
Это будет горизонтально прокручивать элементы (imgs). Когда вы выходите (событие onmouseout), это позволит вам нормально прокручивать тело, пока вы не наведете курсор обратно на горизонтальное содержимое. Отметьте как ответ, если это поможет. Посмотрите эту демонстрацию: https://jsfiddle.net/ase9buy6/5/ Вот код:
<!doctype html>
<html>
<head>
<style>
.help {
width:300px; margin: 0 auto; padding: 20px; position: relative;
height:200px; background:tomato; border: 2px solid green; min-width: 300px;
}
#container {
height:300px; width:400px; overflow-x: scroll;
display: flex; flex-direction: row; overflow-y: hidden;
}
.stop-scrolling {
height: 100%;
overflow: hidden;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id='container' onmouseout = "back()">
<div class = "help">
<img src='http://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg' width='300' height='200'>
</div>
<div class = "help">
Image
</div>
<div class = "help">
Element
</div>
<div class = "help">
video
</div>
<div class = "help">
Text
</div>
</div>
</body>
<script>
document.getElementById("container").addEventListener("wheel", myFunction);
var i = 0;
function stopTheScroll(){
$('body').removeClass('stop-scrolling');
}
function myFunction(e){
//prevent body scrolling
$('body').addClass('stop-scrolling');
//Check if the position is greater/less than the
//width of your content and prevent the scroll from accumulating.
if (i < 0){
i =0;
return;
}
else if ( i > 1350){
i = 1350;
return;
}
//Scroll by w.e speed you want.
e.wheelDelta > 0?i -= 50: i += 50;
$( "#container" ).scrollLeft(i);
}
</script>
</html>@AlokSingh Это было b.c ширины контейнера. Работает отлично. Вам нужно только знать ширину, и вы можете позволить jquery получить это за вас, так что вам даже не нужно знать.
Похоже, в вашем коде есть ошибка. Если при прокрутке я дойду до определенного конца
divи продолжаю прокрутку в этом направлении, а затем меняю направление прокрутки,divпотребуется некоторое время, чтобы переместиться в другом направлении. Вы можете это решить? Это действительно поможет.