javascript - wheel イベントの JavaScript が一貫性のない値を与える

Question

html / javascript / cssを使用してズーム機能に取り組んでいました。タグwheelにイベント リスナーを 追加しました。マウスでうまく動作します。は、ズームインの場合は 120 の正の倍数、それ以外の場合は負の倍数を返します。 問題はタッチパッド にあります。ズームインジェスチャでは、一貫した値が得られません。間にいくつかの があります。このため、ズームは非常に粗いです。スムーズなズームを実現する方法、またはタッチパッドで一貫した値を取得する方法divconsole.log(event.wheelDelta)
console.log



-120
wheelDelta

Answer 1

event.wheelDeltaはすべてのブラウザーで定義されているわけではなく、非推奨であり、Mozilla のドキュメントによると使用すべきではありません。値event.deltaXと を使用できますevent.deltaY。詳細については、Mozilla wheel のドキュメントを参照してください。

Google Chrome と Mozilla Firefox で次のコードをテストしました。価値観は大きく異なります。Google Chrome は常にevent.deltaY値100orを返します-100。Mozilla Firefox では、常に値3または-3.

document.addEventListener('wheel', function(event) {
    console.log(event.deltaX, event.deltaY);
});

ホイールの値に依存するのではなく、Mozilla scroll documentationで説明されているように、スクロール イベントをリッスンします。

var lastKnownScrollPosition = 0;
var ticking = false;

function doSomething(scrollPosition) {
    console.log(scrollPosition);
}

window.addEventListener('scroll', function(e) {
    lastKnownScrollPosition = window.scrollY;
    if(!ticking) {
        window.requestAnimationFrame(function() {
            doSomething(lastKnownScrollPosition);
            ticking = false;
        });
    }
    ticking = true;
});

Answer 2

使用event.wheelDeltaYまたはevent.deltaY
console.log(event.wheelDeltaY)マウスの場合: タッチパッドの場合: -120 の代わりに 0 を返します。wheelDelta に表示される -120 は、実際には水平スクロール ( ) の結果です。も) 0 の場合はズームしないでください。一貫した滑らかなズームが得られます。



wheelDeltaX