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 · 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

User · Answer

Summary Simply prevent the default browser action  window addEventListener  quot keydown quot   function e           space and arrow keys     if  32  37  38  39  40  indexOf e code   gt  -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  quot keydown quot       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  quot keydown quot   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  quot keydown quot   arrow keys handler  false    References  MDN  window addEventListener MDN  window removeEventListener MDN  KeyboardEvent code interface

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

[javascript] Disable arrow key scrolling in users browser

Examples related to javascript

Examples related to canvas

Examples related to scroll

Examples related to arrow-keys