Question

我想知道当用户在该div中垂直滚动时，是否可以将div等图像元素严格地水平移动？我可以想象有一个JavaScript解决方案，但是我不知道那会是什么。

Answer 1

在垂直滚动上进行水平移动的一种方法是对容器进行移动。最初，将容器逆时针旋转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轻松完成此操作，但我个人不知道该怎么做。

Answer 2

这将在元素（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>

在垂直滚动中水平移动div中的元素

2 个答案: