マウスホイールを使用して左右にスクロールできる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>