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](http://stackoverflow.com/questions/14320634/body-stop-scrolling-after-keydown-keypress-with-jquery) — epascarello, Feb 15 '13 at 18:43

score 2 · Accepted Answer · answered Feb 15 '13 at 18:43

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 '13 at 18:43

jondavidjohn

59,273
21
110
154

thank you, this worked without using the keypress, but I added the `e.preventDefault()` and it worked – Thomas Lai Feb 15 '13 at 18:46

Teemu · Answer 2 · 2013-02-15T18:54:53.677

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

score 0 · Answer 3 · answered Feb 15 '13 at 18:45

0

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

answered Feb 15 '13 at 18:45

Alex Ovechkin

800
5
20

at the end of each 'if' statement I mean – Alex Ovechkin Feb 15 '13 at 19:44

javascript prevent scrolling

3 Answers3

Linked