如何製作一個可以使用鼠標滾輪左右滾動的div？

Question

但是，當用戶使用鼠標滾輪上下滾動時，它會左右滾動div。

Answer 1

您必須使用JavaScript。本頁詳細介紹了不同的事件以及如何使用它們：

Mouse wheel programming in JavaScript。

Answer 2

我已經使用原型來鉤住事件。這是最簡單的我可以做一個div來使用鼠標滾輪水平滾動。如果將溢出保持爲自動/滾動/隱藏，則無關緊要。請在不同的瀏覽器中嘗試。我不確定其他瀏覽器中的事件。我主要在IE中做這個，因爲我在IE中編寫代碼。

<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js type="text/javascript"></script> 
<div style="width:100px;height:150px;overflow:auto;" id="myDiv"> 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
</div> 

<script language="javascript"> 
    function handleScroll(e) { 
     var delta = 0; 
     var upScroll = true; 

     if (!e) e = window.event; 
     if (event.wheelDelta) { 
      delta = event.wheelDelta/120; 
     } else if (event.detail) { delta = -event.detail/3; } 

     // increments or decrements the scroll left 
     var div = $('myDiv'); 
     div.scrollLeft = (div.scrollLeft + Math.round(delta) + ((delta > 0) ? 50 : -50)); 
    } 

    // hook events 
    Event.observe($('myDiv'), "mousewheel", handleScroll, false); 
    Event.observe($('myDiv'), "DOMMouseScroll", handleScroll, false); // Firefox 
</script>