Pressing Spacebar Scrolls Page Down

Pressing spacebar scrolls page down?

This default scrolling behavior comes from the keydown event. In order to prevent it, you must handle the keydown event and prevent the default behavior, either by returning false from the event handler or calling event.preventDefault().

As a rule of thumb, think carefully before you prevent default behavior like spacebar scrolling. I use it all the time and I get extremely annoyed when it doesn't work in a page.

But if you want to eat the key...

window.onkeydown = function(e) {
    return e.keyCode !== 32;
};

According to the MDN web docs for KeyboardEvent#keyCode, keyCode is a deprecated property. Although it still works in most browsers, you are encouraged to use KeyboardEvent#key going forward, which is a more standardized string representation of a key. The key value for spacebar is literally the input value: " " (single space string). So if you wanted to be very careful to support all browsers, you could write:

window.onkeydown = function(e) {
    return ev.keyCode !== 32 && ev.key !== " ";
}

HTML prevent space bar from scrolling page

Try checking if target is the body:

window.addEventListener('keydown', function(e) {  if(e.keyCode == 32 && e.target == document.body) {    e.preventDefault();  }});

body { height: 100000px; }

<input /><textarea></textarea>

Pressing space on iframe scrolls parent page down, how to prevent that without breaking keyup event

The onkeypress event fires the browser scrolling. You can call preventDefault in this event, and the keyup and keydown events will continue to fire as intended.

window.onkeypress = function(e) { 
    if (e.keyCode == 32) {
        e.preventDefault();
    }
};

window.onkeyup = function(e) { 
  console.log("Space key up!")
};

Scrolling horizontally by full page on Space Bar key press

Using scrollTo() on a container, in your case document.documentElement, makes for a pretty convincing clone of the standard vertical Space Bar scrolling behaviour.

If you implement this on a full page that differs from your example, you should take care to change container to the proper element and change window.innerWidth if the scroll snap sections are not equal to 100vw.

// Set wrapAround to true to go back to 1 after 3let scrollAmount = 0, wrapAround = true;const container = document.documentElement;
window.onload = () => {  document.body.onkeyup = (event) => {    switch (event.code) {      case 'Space': {        scrollAmount += window.innerWidth
        if (wrapAround && scrollAmount >= container.scrollWidth) {            scrollAmount = window.innerWidth * -1;        }        break;      }      case 'End': {        scrollAmount = container.scrollWidth;        break;      }      case 'Home': {        scrollAmount = 0;        break;      }      case 'PageDown': {        scrollAmount += window.innerWidth
        if (wrapAround && scrollAmount >= container.scrollWidth) {            scrollAmount = window.innerWidth * -1;        }        break;      }      case 'PageUp': {        scrollAmount -= window.innerWidth                if (wrapAround && scrollAmount < 0) {            scrollAmount = container.scrollWidth;        }        break;      }    }
    container.scrollTo({      top: 0,      left: scrollAmount,      behavior: 'smooth'    });  }}
// Reset the scrollAmount if the user scrolls back manually// If we wouldn't do this it would jump from 1 to 3 if the// user scrolls back from 3 to 1 and presses spacewindow.onscroll = (event) => {  scrollAmount = container.scrollLeft;};

* {  margin: 0;  padding: 0}
html { height: 100% }
html, body, section {  display: flex;  flex-grow: 1}
body {  scroll-snap-type: x mandatory;  scroll-snap-points-x: repeat(100%);  overflow-x: auto;}
section {  display: grid;  place-items: center;  flex: 1 0 100%;  scroll-snap-align: center}
section:nth-of-type(1) { background: orange }section:nth-of-type(2) { background: limeGreen }section:nth-of-type(3) { background: royalBlue }
h2 { color: white }

<section><h2>1</h2></section><section><h2>2</h2></section><section><h2>3</h2></section>

Disable scroll down when spacebar is pressed on firefox

This should do the trick. It states that when the spacebar is pressed on the page/document it doesn't just prevent its default behavior, but reverts back to original state.

return false seems to include preventDefault. Source

Check JQuery API's for more information about keydown events - http://api.jquery.com/keydown/

window.onkeydown = function(e) { 
    return !(e.keyCode == 32);
};

JQuery example

$(document).keydown(function(e) {
    if (e.which == 32) {
        return false;
    }
});

EDIT:

As @amber-de-black stated "the above code will block pressing space key on HTML inputs". To fix this you e.target where exactly you want spacebar blocked. This can prevent the spacebar blocking other elements like HTML inputs.

In this case we specify the spacebar along with the body target. This will prevent inputs being blocked.

window.onkeydown = function(e) {
  if (e.keyCode == 32 && e.target == document.body) {
    e.preventDefault();
  }
};

NOTE: If you're using JQuery use e.which instead of e.keyCode Source.

The event.which property normalizes event.keyCode and event.charCode

JQuery acts as a normalizer for a variety of events. If that comes to a surprise to anyone reading this. I recommend reading their Event Object documentation.

Do not scroll page down when spacebar is clicked?

window.onkeydown = function(e) {
    return !(e.keyCode == 32 && (e.target.type != 'text' && e.target.type != 'textarea'));
};

JS - How to disable spacebar scrolling ONLY, but allow other spacebar functionality?

A default behaviour of pressing the spacebar is to scroll. We have the ability to prevent default behaviors using

event.preventDefault();

You are using window.onkeydown, passing the event argument as var e. You know how to recognize keys by keycode, as you have demonstrated. Now then, if the key that is pressed is the spacebar, then prevent the default behaviors (in this case that includes scrolling). You have the option to define your own behavior instead.

Javascript disable spacebar scrolling

You can do it something like this

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

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

Pressing the space bar in a text input is causing the parent element to scroll instead of inputting the value

The perfectScrollbar function seems to add an event handler to some key events. You have to use e.stopPropagation to prevent the execution of other event handlers.

Here is the DEMO Try the demo with and without e.stopPropagation() and you'll see the difference.

function keydownHandler(e) {

    //NEW
    var evt = e ? e : window.event;
    if (evt.stopPropagation)    evt.stopPropagation();
    if (evt.cancelBubble!=null) evt.cancelBubble = true;
    //END

    switch(String.fromCharCode(e.which)) {
    case menu.visible.key:
        if (menu.visible.enable==true && e.shiftKey && e.ctrlKey) 
            sendRequest({action:'visible'});
        break;
    case menu.selected.key:
        if (menu.selected.enable==true && e.shiftKey && e.ctrlKey) 
            sendRequest({action:'selected'});
        break;
    case menu.entire.key:
        if (menu.entire.enable==true && e.shiftKey && e.ctrlKey) 
            sendRequest({action:'entire'});
        break;
    }
}

Pressing Spacebar Scrolls Page Down