Move elements in div horizontally on vertical scroll
Question
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? I can imagine there is a javascript solution but I just don't know what that would be.
2 answers
solution1
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.
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.
solution2
0 2018-08-03 18:43:07
This will scroll horizontally over elements (imgs). When you leave (onmouseout event), it will allow you to scroll in the body normally until you hover back over the horizontal content. Mark as answer if this helps . Check out this demo: https://jsfiddle.net/ase9buy6/5/ Heres the code:
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.