19

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

    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;​

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

4

5 に答える 5

49

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

Blink / Webkit：Chrome 31 /Safari7以降のオンホイールイベントのサポート。それ以外の場合は、onmousewheelイベントevent.wheelDeltaXとevent.wheelDeltaYプロパティを使用します。Chrome / Safariのみのトリック：マウスホイールを左右にスクロールしながらShiftキーを使用する（テストに役立ちます）。

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

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

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

W3C仕様、イベントのMicrosoft IE9ドキュメント、MouseWheelおよびMDNドキュメントonwheelでは、イベントについて次のように指定しています。

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

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

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

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

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

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

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

  • event.wheelDeltaonmousewheel1ノッチ下にスクロールするイベントの場合は-120でした。

  • Windows XPの場合、「WM_MOUSEHWHEELメッセージのサポートを追加して、その機能を実現する必要があります[、support]がVistaで追加されたため、XPを使用している場合は、IntelliTypeProまたはIntelliPoint、あるいはその両方をインストールする必要があります」-この記事のとおり。

  • さまざまな一般的なタッチパッドおよびマウスドライバーは、ブラウザーのマウスホイールのサポートを無効にします。たとえば、ブラウザーの破損の検出や、WM_MOUSEWHEELおよびWM_MOUSEHWHEELメッセージの代わりにWM_HSCROLLおよびWM_VSCROLLメッセージを使用します。そのため、ドライバーはブラウザーでホイールイベントを生成しません（使用したブラウザーや使用したWindowsのバージョンに関係なく）。BugzillaでWM_VSCROLLを検索すると、 Firefoxだけでなくすべてのブラウザに影響を与える可能性のある問題が表示されます。
于 2012-10-12T00:54:23.773 に答える
6

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

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

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

于 2012-05-30T18:38:44.697 に答える
1

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

event.originalEvent.wheelDeltaX

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

于 2012-05-30T18:34:14.127 に答える
1

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

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

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

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

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

Chromeは、IEAFAIKと同じ動作を実装しています。IEとChromeの場合：e.wheelDeltaXとe.wheelDeltaYを使用します

于 2012-05-30T18:38:34.207 に答える
0

IEはそれらすべてをサポートします：mousewheel | イベントハンドラーであるonmousewheelと、標準のイベントおよびインターフェイスであるWheelEvent（、、を提供しますDeltaX）はDeltaY、IE9 +でもサポートされています（他の座標関連のプロパティを使用して）。DeltaZMouseWheelEventWheelDeltaxy

IE11でテスト済み。

関連：タッチイベント標準が最終的に正式化された今日、IE11はすでにそのほとんどをサポートしていることが判明しました：http：//blogs.msdn.com/b/ie/archive/2015/02/24/pointer-events-w3c-recommendation -相互運用可能-タッチアンドリムービング-ザ-ドレッド-300ms-tap-delay.aspx。

余談ですが、@ bob_cobbは、承認された回答を再検討して、最も投票数が多く、詳細が最も豊富なものを優先することをお勧めします。これは、将来の訪問者が正しい情報を見つけ、コミュニティの世話をすることさえ示すのに役立ちます！

于 2015-02-25T04:02:01.860 に答える