使用水平滾動滾輪

我對網頁設計比較陌生。我在我的設計中使用PHP，HTML，CSS和JQuery。我創建了一個滾動圖像查看器，圖像作爲內嵌塊。高度固定爲屏幕的100％，因此不應使用垂直滾動條。我已經允許在x方向上滾動，因此用戶可以在圖像中水平滾動。使用水平滾動滾輪

這一切都可以正常工作，但是滾輪沒有任何作用。無論如何，我可以垂直滾動輸入從鼠標翻譯到水平滾動？

CSS：

.photoViewer { 
    white-space: nowrap; 
    height: 100%; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    padding-top: 50px; 

} 

.photoViewer li { 

    display: inline-block; 
    height: 100%; 
    padding: 0; 
} 

.photoViewer li img{ 
    height: 100% ; 
    width: auto; 
    margin-right: 10px; 
}

來源

2016-11-30 Sam Tyler

@ freedomn -m這不就是他爲什麼*新*的原因嗎？要回答你的問題，是的，這是可能的，用'javascript' /'jquery' – Nytrix

@ freedomn-m你鏈接的第一篇文章給出了我所要求的並且做得很好的網站示例。 –

有是一個jQuery插件，可以幫助你完成這個叫jQuery Mousewheel。從CSS技巧克里斯Coyier把它用在他的例子here基本上轉化Y軸滾動到X軸的滾動：

// Code by Chris Coyier 
$(function() { 
    $("body").mousewheel(function(event, delta) { 
     this.scrollLeft -= (delta * 30); 
     event.preventDefault(); 
    }); 
});

來源

2016-11-30 17:59:32

可以使用wheel事件和X.

本質翻譯移動deltaY：

$(".inner").on("wheel", function() { 
    var outer = $(this).closest(".outer"); 
    outer.scrollLeft(outer.scrollLeft() + e.originalEvent.deltaY); 
    e.preventDefault(); 
});

但是這有點跳動，所以你可以添加一個動畫 - 測試使得這個非常笨重，如果動畫時間太大，因此exta .stop()。

您可以使用css轉換實現更好的動畫/平滑滾動。

$("#inner").on("wheel", function(e) { 
 
    var outer = $(this).closest("#outer") 
 
    //outer.scrollLeft(outer.scrollLeft() + e.originalEvent.deltaY) 
 
    outer.stop(false,false).animate({scrollLeft:"+="+e.originalEvent.deltaY}, 50) 
 
    e.preventDefault(); 
 
});

#outer { 
 
    display:block; 
 
    width:200px; 
 
    height:100px; 
 
    overflow-y:hidden; 
 
    overflow-x:scroll; 
 
    border:1px solid red 
 
} 
 
#inner { 
 
    display:block; 
 
    width: 500px; 
 
    height:100px; 
 
    border:1px solid blue; 
 
    background: blue; 
 
    background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
 
    background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
 
    background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
 
    background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='outer'> 
 
<div id='inner'> 
 
</div> 
 
</div>

（顯然不使用mousehweel，因爲它是非標準的 - 這可能是因爲jQuery的爲您處理此）。

來源

2016-11-30 18:29:12

使用水平滾動滾輪

回答

相關問題