How do I keep arrow keys from scrolling a webpage?

  • I recently uploaded the demo for my game to Newgrounds and Itch, but I'm running into an issue where using the arrow keys to move or select still scrolls the webpage. It's affecting the Newgrounds rating, which is a real bummer.

    Is there any way to prevent this from happening, or do I just have to switch from arrow keys to WASD?

    Thanks

  • Add the following to your HTML

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

    I'm surprised NG doesn't do this by default, but at the end of the day a blanket wide change to standard usability would be terrible.

    Ashley maybe this could be an export setting for HTML5? Or part of the browser object?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Add the following to your HTML

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

    I'm surprised NG doesn't do this by default, but at the end of the day a blanket wide change to standard usability would be terrible.

    Ashley maybe this could be an export setting for HTML5? Or part of the browser object?

    Worked like a charm. Much appreciated!

  • Ashley maybe this could be an export setting for HTML5? Or part of the browser object?

    If the game is framed and the parent page is scrollable, Construct can't automatically control the parent page. So generally to properly solve this the arcade sites need to add that code themselves.

  • Add the following to your HTML

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

    I'm surprised NG doesn't do this by default, but at the end of the day a blanket wide change to standard usability would be terrible.

    Ashley maybe this could be an export setting for HTML5? Or part of the browser object?

    This worked for me too Elliott . Thanks, good info!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)