ユーザーブラウザで矢印キーのスクロールを無効にする

Question 1

キャンバスとJavaScriptを使ってゲームを作っています。

ページが画面より長い場合（コメントなど）、下矢印を押すとページが下にスクロールし、ゲームをプレイできなくなります。

プレーヤーが下に移動したいときにウィンドウがスクロールしないようにするにはどうすればよいですか？

Javaゲームなどでは、ユーザーがゲームをクリックする限り、これは問題ではないと思います。

FFで矢印キーを使用してページスクロールを無効にする方法から解決策を試しましたが、機能させることができませんでした。

Question 2

概要

デフォルトのブラウザアクションを単に防止します。

window.addEventListener("keydown", function(e) {
    // space and arrow keys
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);

元の回答

私は自分のゲームで次の関数を使用しました。

var keys = {};
window.addEventListener("keydown",
    function(e){
        keys[e.keyCode] = true;
        switch(e.keyCode){
            case 37: case 39: case 38:  case 40: // Arrow keys
            case 32: e.preventDefault(); break; // Space
            default: break; // do not block other keys
        }
    },
false);
window.addEventListener('keyup',
    function(e){
        keys[e.keyCode] = false;
    },
false);

魔法はで起こりe.preventDefault();ます。これにより、イベントのデフォルトのアクションがブロックされます。この場合、ブラウザの視点が移動します。

現在のボタンの状態が必要ない場合はkeys、矢印キーのデフォルトのアクションをドロップして破棄するだけです。

var arrow_keys_handler = function(e) {
    switch(e.keyCode){
        case 37: case 39: case 38:  case 40: // Arrow keys
        case 32: e.preventDefault(); break; // Space
        default: break; // do not block other keys
    }
};
window.addEventListener("keydown", arrow_keys_handler, false);

このアプローチでは、矢印キーのスクロールを再度有効にする必要がある場合に、後でイベントハンドラーを削除することもできます。

window.removeEventListener("keydown", arrow_keys_handler, false);

参考文献

MDN： window.addEventListener
MDN： window.removeEventListener

Question 3

保守性のために、要素自体（あなたの場合はキャンバス）に「ブロッキング」ハンドラーをアタッチします。

theCanvas.onkeydown = function (e) {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
        e.view.event.preventDefault();
    }
}

単純にやってみませんwindow.event.preventDefault()か？MDNの状態：

window.eventは、DOMイベントハンドラーが呼び出されているときにのみ使用できる独自のMicrosoft InternetExplorerプロパティです。その値は、現在処理されているEventオブジェクトです。

さらなる読み物：

Question 4

jQueryとネイティブJavascriptの両方で、矢印キーが押されたときにスクロールをブロックするさまざまな方法を試しました。これらはすべてFirefoxで正常に機能しますが、最近のバージョンのChromeでは機能しません。
の明示的な{passive: false}プロパティでさえ、window.addEventListenerたとえばここで、唯一の有効なソリューションとして推奨されています。

結局、何度も試した後、FirefoxとChromeの両方で自分に合った方法を見つけました。

window.addEventListener('keydown', (e) => {
    if (e.target.localName != 'input') {   // if you need to filter <input> elements
        switch (e.keyCode) {
            case 37: // left
            case 39: // right
                e.preventDefault();
                break;
            case 38: // up
            case 40: // down
                e.preventDefault();
                break;
            default:
                break;
        }
    }
}, {
    capture: true,   // this disables arrow key scrolling in modern Chrome
    passive: false   // this is optional, my code works without it
});

MDNEventTarget.addEventListener()からの引用

optionsオプション
   optionsオブジェクトは、イベントリスナーに関する特性を指定します。使用可能なオプションは次のとおりです。

キャプチャ
   ABooleanは、このタイプのイベントが、DOMツリー内のその下のイベントにディスパッチさlistenerれる前に登録済みにディスパッチされるEventTargetことを示します。
一度
   ...
パッシブA。true
   のBoolean場合、で指定された関数listenerがを呼び出さないことを示しますpreventDefault()。パッシブリスナーが呼び出しpreventDefault()を行う場合、ユーザーエージェントはコンソール警告を生成する以外に何もしません。..。