[英]Move elements in div horizontally on vertical scroll
我想知道當用戶在該div中垂直滾動時，是否可以在div中移動諸如圖像之類的元素以嚴格地水平移動？ 我可以想象有一個JavaScript解決方案，但我不知道那會是什么。
在垂直滾動上進行水平移動的一種方法是對容器進行操作。 最初，將容器逆時針旋轉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>
PS盡管我確實認為可以使用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 we speed you want. e.wheelDelta > 0?i -= 50: i += 50; $( "#container" ).scrollLeft(i); } </script> </html>
垂直和水平滾動滾動元素（Jquery / Javascript）
[英]Move elements on scroll vertically and horizontally (Jquery/Javascript)
Div水平固定位置，水平滾動時垂直移動
[英]Div fixed position horizontally with vertical movement upon horizontal scroll
包含垂直可滾動div的水平可滾動div不會在iOS上水平滾動
[英]Horizontally scrollable div which contains vertical scrollable div will not scroll horizontally on iOS
如何在javascript和/或css中向下滾動時水平移動div
[英]How to horizontally move a div as you scroll down in javascript and or css
jQuery - 在垂直鼠標滾動上水平移動元素 - 滾動方法不適用於自定義變量
[英]jQuery - dynamically move element horizontally on vertical mouse scroll - scroll method not working on custom variable
如何水平滾動div內的元素javascript / jquery
[英]How to scroll elements inside div horizontally javascript/jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.