web-dev-qa-db-ja.com

Javascriptを使用してx軸（左と右）のマウスホイールを検出する

私は上下を検出することが可能であることを知っています。

    function handle(delta) {
    if (delta < 0) {
        alert('down');
} else {
    alert('up');
    }
}

function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
        delta = event.wheelDelta/120; 
    } else if (event.detail) {
        delta = -event.detail/3;
    }
    if (delta)
        handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code. */
if (window.addEventListener)
    window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;​

しかし、ユーザーのマウスがマウスホイールで左または右に移動したかどうかを検出する方法はありますか？

javascriptscrollinternet-explorer-9mousewheelinternet-explorer-10
19
bob_cobb

  • Firefoxの DOMMouseWheel イベントにはaxisプロパティがあります。

  • ChromeのmousewheelイベントにはwheelDeltaXとwheelDeltaYがあります。

  • 残念ながら、IEイベント（IE9でテスト）に相当するプロパティを見つけることができません。

6
apsillers

Internet Explorer：IE9およびIE10では、onwheelを使用してaddEventListenerイベント（onmousewheelでもDOMMouseScrollでもない）を使用して、水平ホイールを検出できるようにする必要があります。 DOMからスクロールします。 _event.deltaX_値を_event.deltaMode_値と一緒に使用して、水平方向のマウスホイールを検出します（垂直方向のホイールの場合は、_event.deltaY_値を使用します）。 <= IE8の場合は、onmousewheelイベントと_event.wheelDelta_を使用します（古いIEバージョンではyaxisマウスホイールのみがサポートされています）。

Blink/Webkit：オンホイールイベントのChrome 31/Safari 7以降のサポート。それ以外の場合は、onmousewheelイベントと_event.wheelDeltaX_および_event.wheelDeltaY_プロパティ。Chrome/ Safariのみのトリック：Shiftキーを使用してマウスホイールを左右にスクロールします（テストに役立ちます）。

Firefox：Firefox17以降 オンホイールイベントをサポート 。古いバージョンのFirefox（3.6に戻る）をサポートするには、非推奨になったDOMMouseScrollプロパティとevent.axisプロパティおよびevent.detailプロパティを使用して、水平スクロールをサポートします。 （Firefox mobile：ドキュメントは、タッチデバイスを使用してパンするとオンホイールイベントが発生することを示しています。私は試していません。） FirefoxにはMozMousePixelScrollイベントもあります。 MDNドキュメントには、ブラウザ間でさまざまなイベントを処理するための推奨コードも記載されています。 Firefoxにはmousewheel.enable_pixel_scrolling構成もあり、さまざまなホイールイベントすべてに影響を与える可能性があります。

自分でonwheelイベントを試してみてください QuirksModeのwheelイベントテスターを使用してください。 Win7のIE9とWindows8のIE10を使用してこれが機能していることを確認できました（リリースプレビュー、IEバージョン10.0.8400.0）。新しい標準のオンホイールイベントをセットアップするには：

  • AddEventListener（キャプチャ）無線を選択します。
  • スクロールのチェックを外します。
  • マウスホイールのチェックを外します。
  • ホイールにチェックマークを付けたままにします。
  • 右の列の下部にある[イベントのプロパティを表示]にチェックマークを付けます。
  • F12を使用して、ドキュメントがdocumentModeIE9標準またはIE10標準になっていることを確認します。
  • 中央の列でマウスホイールを実行すると、ホイールイベントが左側の列に記録され、ホイールイベントの詳細が右側の列の下部に表示されます。
  • イベントを取得するために、ホイールイベントチェックボックスのチェックを外して再度チェックする必要がある場合があります（理由はわかりません：quirksmodeページまたはIEのバグかもしれません）。

W3C仕様 、 MouseWheelイベントのMicrosoftIE9ドキュメント および MDNドキュメントonwheelイベントの指定：

  • deltaX-マウスホイールがx軸（水平）を中心に回転した距離を取得します。
  • deltaY-マウスホイールがy軸（垂直）を中心に回転した距離を取得します。
  • deltaZ-マウスホイールがz軸を中心に回転した距離を取得します。
  • deltaMode-デルタ値の測定単位を示す値を取得します：
    • _DOM_DELTA_PIXEL_（0x00）デフォルト。デルタはピクセル単位で測定されます。
    • _DOM_DELTA_LINE_（0x01）デルタはテキスト行で測定されます。
    • _DOM_DELTA_PAGE_（0x02）デルタはテキストのページで測定されます。

編集：_event.ctrlKey_が設定されている場合は、イベントを防止しないようにしてください。防止しないと、ページのズームが防止される可能性があります。また、ChromeおよびIEのタッチパッドでピンチズームを使用すると、ctrlKeyがtrueに設定されているようです。

IEでは機能の検出が困難です。

  • IE8 documentModeを使用するIE10では、_'onwheel' in document_はtrueを返しますが、水平または垂直のオンホイールイベントに対してイベントが発生していないようです。
  • IE9では_'onwheel' in document_はfalseを返しますが、オンホイールイベントは機能します（IE9でオンホイールイベントを使用する前に_document.documentMode === 9_を確認する必要があると思います）。
  • IE9およびIE10では、従来のdocument.onwheel = 'somefunc(event)'はdocumentMode9または10でも機能しないようです（つまり、addEventListenerしか使用できないようです）。

テストするには、Microsoftチルトホイールマウス、スクロールタッチパッド（ジェスチャまたはゾーン）、またはAppleデバイス（マジックマウスまたは強力なマウススクロールボール）を使用します。ウィンドウでさまざまなマウスまたはタッチパッドの設定で遊んでください（または、Safariを使用したOSXで水平スクロールをテストする場合は、OSXでのマウス設定）。

デルタ値の符号は、すべてのブラウザでオンホイールとオンマウスホイールの符号が逆になっています。 IEデルタ値は、オンホイールとオンマウスホイールで異なります（たとえば、非常に標準的なMicrosoftマウスを搭載したIE9で開発マシンを使用）：

  • _event.deltaY_は、Win8では111、Win7では72で、onwheelイベントを1ノッチ下にスクロールしました。値はズームによってわずかに変化しますが、他にも解決できない要素がいくつかあります（フォントサイズではないようです）。

  • _event.wheelDelta_は、onmousewheelイベントが1ノッチ下にスクロールした場合は-120でした。

  • Windowsの場合XP "動作させるには_WM_MOUSEHWHEEL_メッセージのサポートを追加する必要があります[、support]がVistaで追加されたため、XP IntelliTypeProまたはIntelliPoint、あるいはその両方をインストールする必要があります」 この記事 のとおり。

  • さまざまな一般的なタッチパッドとマウスドライバーは、ブラウザーのマウスホイールサポートを無効にします。壊れたブラウザの検出、またはWM_MOUSEWHEELメッセージとWM_MOUSEHWHEELメッセージの代わりにWM_HSCROLLメッセージとWM_VSCROLLメッセージを使用する。そのため、ドライバーはブラウザーでホイールイベントを生成しません（使用したブラウザーや使用したWindowsのバージョンに関係なく）。 BugzillaでWM_VSCROLLを検索 は、Firefoxだけでなくすべてのブラウザに影響を与える可能性のある問題を示しています。
48
robocat

「水平」またはx軸のデータは次の場所から見つけることができると思います

event.originalEvent.wheelDeltaX

コードをデバッグし、実行時にイベントオブジェクトがどのようなプロパティを持っているかを確認する必要があります。これにより、そのプロパティが存在するかどうかが確認または拒否されます。そこから、値が異なるかどうかを検出するだけです。

1
aglassman

その他のリンクと情報については、承認された回答を確認してください。

バブリングスクロール/マウスホイールイベント

event.detailは、マウスホイールが移動した「ティック」の数を指定します。

正の値は下/右を意味し、負の値は上/左を意味します。

event.axisは、スクロールジェスチャの軸（水平または垂直）を指定します。この属性はFirefox3.5で追加されました

ChromeはIE AFAIKと同じ動作を実装します。IEおよびChrome：usee.wheelDeltaXおよびe.wheelDeltaY

1
Knyri

IEはそれらすべてをサポートします： mousewheel | onmousewheel これは イベントハンドラー および WheelEvent （DeltaX、DeltaY、DeltaZ）は 標準イベント であり、 MouseWheelEventインターフェイス 、これは サポートされています = IE9 +の場合（WheelDeltaおよび他のxの数、y座標関連のプロパティを使用）。

IE11でテスト済み。

関連：タッチイベント標準が最終的に正式化された今日、IE11はすでにそのほとんどをサポートしていることが判明しました： http://blogs.msdn.com/b/ie/archive/2015/02/24/pointer-events -w3c-recommendation-interoperable-touch-and-removing-the-dreaded-300ms-tap-delay.aspx 。

余談ですが、@ bob_cobbは、承認された回答を再検討して、 最も詳細なもので最も投票されたもの を支持することをお勧めします。これは、将来の訪問者が正しい情報を見つけ、コミュニティへの配慮を示すのに役立ちます。

0
Annie