6

ページがスクロールしない/スクロールできない状況で、ユーザーがスクロール ホイールをスクロールしたときにイベントをキャプチャしたいと考えています。ただし、標準の JS スクロール イベントは、ブラウザーが実際にスクロールしたときにのみ発生し、オーバーフローを非表示にするようにスタイル設定された DOM 要素に対しては発生しません。

Google マップのズームへのスクロールは、私が探している動作のタイプの例です。

このようなことを達成する方法を知っている人はいますか?

ありがとう。

4

3 に答える 3

10

マウス ホイール イベントを問題なくキャプチャできます。

$( '#yourElement' ).on( 'DOMMouseScroll mousewheel', function () {
    ...
});

ライブデモ: http://jsfiddle.net/chtNP/1/

(私は jQuery を使用してイベント ハンドラーをバインドしていますが、もちろん、使用する API に関係なく機能します。)

于 2012-11-08T01:51:29.323 に答える
2

現時点では、Firefox は DOMMouseScroll と wheel イベントを定義しています。Chrome、Opera、および IE (最新、再び! ) では、マウスホイールが定義されています。

これが私がやった方法です：

if(window.onwheel !== undefined) {
    window.addEventListener('wheel', onMouseWheel)
} else if(window.onmousewheel !== undefined) {
    window.addEventListener('mousewheel', onMouseWheel)
} else {
    // unsupported browser
}

古い IE バージョンでの addEventListener のサポートには、ポリフィルが必要であることに注意してください。または、古い window.mousewheel = function(){} などのメソッドを使用できます。

ご覧のとおり、イベント リスナーは window オブジェクトにアタッチされています。クロスブラウザー方式で要素にアタッチすることはできません。イベント オブジェクトのターゲット プロパティを使用して、トリガーされた場所を確認し、それに基づいてフィルター処理を実行できます。

PS: クロスブラウザーに関するもう 1 つの考慮事項: IE では、イベント オブジェクトをコールバック関数 ("onMouseWheel") で処理するときに、イベント オブジェクト内で "wheelDelta" プロパティを使用する (そして符号を反転する) 必要があります。他のブラウザーでは、「deltaY」(水平スクロールの場合は「deltaX」) が入力されます。

于 2013-12-09T17:45:32.577 に答える
0

jQueryを使用すると、このプラグイン、または同じことを行う同様のプラグインをいくつでも使用できます。

jQueryまたは同様のフレームワークがオプションでない場合、それは可能ですが、複数のブラウザーで動作させたい場合は、苦痛の世界に備えてください...

于 2012-11-08T01:47:35.290 に答える