Summary

Simply prevent the default browser action:

window.addEventListener("keydown", function(e) {

    if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {

        e.preventDefault();

    }

}, false);

If you need to support Internet Explorer or other older browsers, use e.keyCode instead of e.code, but keep in mind that keyCode is deprecated and you need to use actual codes instead of strings:

// Deprecated code!

window.addEventListener("keydown", function(e) {

    // space and arrow keys

    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {

        e.preventDefault();

    }

}, false);

Original answer

I used the following function in my own game:

var keys = {};

window.addEventListener("keydown",

    function(e){

        keys[e.code] = true;

        switch(e.code){

            case "ArrowUp": case "ArrowDown": case "ArrowLeft": case "ArrowRight":

            case "Space": e.preventDefault(); break;

            default: break; // do not block other keys

        }

    },

false);

window.addEventListener('keyup',

    function(e){

        keys[e.code] = false;

    },

false);

The magic happens in e.preventDefault();. This will block the default action of the event, in this case moving the viewpoint of the browser.

If you don't need the current button states you can simply drop keys and just discard the default action on the arrow keys:

var arrow_keys_handler = function(e) {

    switch(e.code){

        case "ArrowUp": case "ArrowDown": case "ArrowLeft": case "ArrowRight": 

            case "Space": e.preventDefault(); break;

        default: break; // do not block other keys

    }

};

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

Note that this approach also enables you to remove the event handler later if you need to re-enable arrow key scrolling:

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

References

• MDN: window.addEventListener


• MDN: window.removeEventListener


• MDN: KeyboardEvent.code interface