javascript - スクロールが妨げられている要素からジッターを取り除く方法

Question

最初にこの他の質問を見てください: Mouse wheel scroll event and the demo from the Accepted answer .

スクロール イベントがキャンセルされたときのジッターを減らすにはどうすればよいですか?

Answer 1

デモ: http://jsfiddle.net/HUGTL/

元の質問への回答に基づいて、次のようなことができます。

var noscroll = document.getElementById('noscroll');

var locked, lockedX, lockedY;
noscroll.addEventListener('mouseover', function (){
    locked = true;
    lockedX = window.scrollX;
    lockedY = window.scrollY;
}, false);
noscroll.addEventListener('mouseout', function (){
    locked = false;
}, false);

// changes

$(window).on("mousewheel keydown", function(e){
    if(locked === true){
        return false;
    }
});

$(window).on("scroll", function(e){
    if(locked === true){
        // add fallback here for other scenarios
    }
});

イベント処理を簡素化/標準化するためにjQueryを使用しています。

キーイベントを防ぐことは望ましくない場合があることに注意してください。矢印キーを防ぐ方法を示すためにそれを含めました（特定のキーコードを確認することもできます）。

によって処理されないシナリオの一般的なフォールバック ハンドラーも追加しましたmousewheel/keydown。

これは、タッチ イベントではうまく機能しない (またはまったく機能しない) 場合があります。最も重要なことは、ユーザーを混乱させたり、期待される機能を削除したりしないようにすることです。

マウスホイールのみを処理したい場合は、もっと簡単かもしれません:

$("#noscroll").on("mousewheel", function(e){
    return false;
});

デモ: http://jsfiddle.net/HUGTL/3/ . ただし、これは重要なイベントでは機能しません。