在垂直滚动中水平移动div中的元素
[英]Move elements in div horizontally on vertical scroll
问题描述
I was wondering if it was possible to move elements such as images in a div to move strictly in a horizontal fashion when the user scrolls vertical within that div? 
我想知道当用户在该div中垂直滚动时，是否可以在div中移动诸如图像之类的元素以严格地水平移动？ I can imagine there is a javascript solution but I just don't know what that would be. 我可以想象有一个JavaScript解决方案，但我不知道那会是什么。
2 个解决方案
解决方案1
4 2018-08-03 06:21:27
A way to do horizontal movement on vertical scroll would be to container. 在垂直滚动上进行水平移动的一种方法是对容器进行操作。 Initially, rotate the container 90 degrees counter-clockwise, followed by rotating the children inside the container 90 degrees clockwise. 最初，将容器逆时针旋转90度，然后将容器内的子级顺时针旋转90度。
This way, the container upon vertical scroll would be actually moving horizontally with respect to the page, while the elements in it would be moving downwards with respect to the container. 这样，容器在垂直滚动时实际上将相对于页面水平移动，而其中的元素将相对于容器向下移动。
::-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>
PS Although I do think that it can be done easily using javascript , I personally don't know how to do it. PS尽管我确实认为可以使用javascript轻松完成，但我个人不知道该怎么做。
解决方案2
0 2018-08-03 18:43:07
This will scroll horizontally over elements (imgs). 这将在元素（imgs）上水平滚动。 When you leave (onmouseout event), it will allow you to scroll in the body normally until you hover back over the horizontal content. 离开时（onmouseout事件），它将允许您正常滚动主体，直到将鼠标悬停在水平内容上。 Mark as answer if this helps . 如果有帮助，请标记为答案 。 Check out this demo: https://jsfiddle.net/ase9buy6/5/ Heres the code: 查看此演示： 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 we speed you want. e.wheelDelta > 0?i -= 50: i += 50; $( "#container" ).scrollLeft(i); } </script> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.