Javascript disable spacebar scrolling

Question

I am working on a WebGL application and I use the spacebar for movement of the camera. The problem is, when I press the spacebar the website also scrolls down. Is there a way to disable this feature?

None of the answers so far works reliably. They work for about a second, then the site scrolls down for a tiny amount of time and then the cycle repeats.

This is my code for the keypresses:

window.addEventListener("keydown", (e) =>  {
    if(e.repeat) { return; }

    if(e.which == 27 || e.which == 9) {
        document.exitPointerLock();
        checkMouse = false;
    }

    if(checkMouse) {
        if(e.which == 87) { forwardPressed = true; }
        if(e.which == 83) { backwardPressed = true; }
        if(e.which == 65) { leftPressed = true; }
        if(e.which == 68) { rightPressed = true; }
        if(e.which == 32) { upPressed = true; event.stopPropagation(); event.preventDefault(); }
        if(e.which == 16) { downPressed = true; }
    }
});

As you can see, for the space key there already is one solution implemented but both types of answers I have gotten so far don't work.

Duplicate of [Pressing spacebar scrolls page down?](https://stackoverflow.com/questions/2343573/pressing-spacebar-scrolls-page-down) — Guy Incognito, Jun 05 '20 at 07:44
You need to mention in the question what solutions you've tried and what exact problems you've hade with them. Otherwise you can't avoid getting generic solutions to the stated problem. — Guy Incognito, Jun 05 '20 at 07:52
@GuyIncognito I'm pretty sure there is a generic solution to this problem, but the answers so far just haven't worked reliably. — user11914177, Jun 05 '20 at 07:54
The generic, reliable solution is in the duplicate. If it doesn't work for you, you have some other code that's interfering with it. — Guy Incognito, Jun 05 '20 at 07:56
...and this is a prime example why you should always show your code when it doesn't work, instead of insisting that everyone else is wrong. — Guy Incognito, Jun 05 '20 at 08:24
@GuyIncognito And that also is a prime example why you shouldn't just close a question because its about a topic that already has been answered — user11914177, Jun 05 '20 at 08:35

Nabil Farhan · Accepted Answer · 2020-06-05T07:58:19.167

1

You can do it something like this

$(document).keypress(function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);

    if(keycode == '32') {
        event.preventDefault();
    }
});

edited Jun 05 '20 at 07:58

answered Jun 05 '20 at 07:47

Nabil Farhan

59
2

This doesn't work reliably. Every second it scrolls down bit – user11914177 Jun 05 '20 at 07:52

Priyank-py · Answer 2 · 2020-06-05T08:21:34.383

0

Add this to your javascript:

let checkMouse = true
window.addEventListener("keydown", (e) =>  {
if(e.repeat) { 

    return; 
}

if(e.which == 27 || e.which == 9) {
    document.exitPointerLock();
    checkMouse = false;
}

if(checkMouse) {
    if(e.which == 87) { forwardPressed = true; }
    if(e.which == 83) { backwardPressed = true; }
    if(e.which == 65) { leftPressed = true; }
    if(e.which == 68) { rightPressed = true; }
    if(e.which == 32) { upPressed = true; event.stopPropagation(); event.preventDefault(); }
    if(e.which == 16) { downPressed = true; }
}
if (e.which == 32) {
    return !(e.keyCode == 32);
}
});

checkMouse wasn't initialised before. It's working fine here.

edited Jun 05 '20 at 08:21

answered Jun 05 '20 at 07:59

Priyank-py

319
3
13

As already said in the comments under the question this doesn't work reliably – user11914177 Jun 05 '20 at 08:00
Worked for me, there must be some conflict, share your code. – Priyank-py Jun 05 '20 at 08:04
I added some code – user11914177 Jun 05 '20 at 08:06
made some update. – Priyank-py Jun 05 '20 at 08:21
Of course checkMouse is initialised – user11914177 Jun 05 '20 at 08:25

Javascript disable spacebar scrolling

2 Answers2