Disable arrow key scrolling in users browser

Question

I m making a game using canvas  and javascript   When the page is longer than the screen  comments  etc   pressing the down arrow scrolls the page down  and makes the game impossible to play   What can I do to prevent the window from scrolling when the player just wants to move down   I guess with Java games  and such  this is not a problem  as long as the user clicks on the game    I tried the solution from  How to disable page scrolling in FF with arrow keys  but I couldn t get it to work

User · Accepted Answer

Summary

Simply prevent the default browser action:

window.addEventListener("keydown", function(e) {
    // space and arrow keys
    if([32, 37, 38, 39, 40].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.

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 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.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 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);

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

User · Answer

I ve tried different ways of blocking scrolling when the arrow keys are pressed  both jQuery and native Javascript - they all work fine in Firefox  but don t work in recent versions of Chrome  Even the explicit  passive  false  property for window addEventListener  which is recommended as the only working solution  for example here  In the end  after many tries  I found a way that works for me in both Firefox and Chrome  window addEventListener  keydown    e    gt        if  e target localName     input          if you need to filter  lt input gt  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      Quote for EventTarget addEventListener   from MDN  options Optional       An options object specifies characteristics about the event listener  The available options are   capture       A Boolean indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree  once           passive       A Boolean that  if true  indicates that the function specified by listener will never call preventDefault    If a passive listener does call preventDefault    the user agent will do nothing other than generate a console warning

User · Answer

For maintainability  I would attach the  blocking  handler on the element itself  in your case  the canvas    theCanvas onkeydown   function  e        if  e key      ArrowUp     e key      ArrowDown             e view event preventDefault              Why not simply do window event preventDefault    MDN states      window event is a proprietary Microsoft Internet Explorer property   which is only available while a DOM event handler is being called  Its   value is the Event object currently being handled    Further readings    https   developer mozilla org en-US docs Web API UIEvent view https   developer mozilla org en-US docs Web API KeyboardEvent key

[javascript] Disable arrow key scrolling in users browser

Summary

Original answer

References

Examples related to javascript

Examples related to canvas

Examples related to scroll

Examples related to arrow-keys