javascript prevent scrolling

Question

I am trying to prevent scrolling when I use arrow keys in my HTML5 game. It is a maze game that you control with arrow keys or buttons on the screen, but whenever I press the 'up' or 'down' keys, it always scrolls.I am using:

document.addEventListener('keydown', function(e){
    if(e.keyCode === 40) {
        down();
    } else if(e.keyCode === 38) {
        up();
    } else if(e.keyCode === 37) {
        leftclick();
    } else if(e.keyCode === 39) {
        rightclick();
    }
})

Is this possible with javascript? I want it to be able to scroll with my mouse, but not when I use arrow keys on my keyboard. My game is at http://thomaswd.com/maze. Please help. Thanks!

possible duplicate of Body stop scrolling after keydown, keypress with jQuery — epascarello
– epascarello, Commented Feb 15, 2013 at 18:43

jondavidjohn · Accepted Answer · 2013-02-15 18:43:43Z

2

Use e.preventDefault() to prevent the normal key action from taking place.

document.addEventListener('keydown', function(e){
    if(e.keyCode === 40) {
        down();
        e.preventDefault();
    } else if(e.keyCode === 38) {
        up();
        e.preventDefault();
    } else if(e.keyCode === 37) {
        leftclick();
        e.preventDefault();
    } else if(e.keyCode === 39) {
        rightclick();
        e.preventDefault();
    }

})

answered Feb 15, 2013 at 18:43

jondavidjohn

62.5k21 gold badges120 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thomas Lai Over a year ago

thank you, this worked without using the keypress, but I added the e.preventDefault() and it worked

Teemu · Accepted Answer · 2013-02-15 18:54:53Z

1

Try this:

document.addEventListener('keydown', function(e) {
        if(e.keyCode > 36 && e.keyCode < 41) {
            e.preventDefault();
        }
        if (e.keyCode === 40) {
            down();
        } else if (e.keyCode === 38) {
            up();
        } else if (e.keyCode === 37) {
            leftclick();
        } else if (e.keyCode === 39) {
            rightclick();
        }
        return false;
    }, false);
}

edited Feb 15, 2013 at 18:54

answered Feb 15, 2013 at 18:48

Teemu

23.5k7 gold badges61 silver badges113 bronze badges

Comments

Alex Ovechkin · Accepted Answer · 2013-02-15 18:45:03Z

0

Try to add e.preventDefault(); at the end

answered Feb 15, 2013 at 18:45

Alex Ovechkin

8206 silver badges21 bronze badges

1 Comment

Alex Ovechkin Over a year ago

at the end of each 'if' statement I mean

Collectives™ on Stack Overflow

javascript prevent scrolling

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related