48

I'm using the code:

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

which does exactly what I want, stops the page from scrolling when the spacebar is pressed. However it also prevents the user from typing spaces in a textbox

Is there a way to prevent the spacebar-scroll as well as retain the spacebar functionality while typing?

Parad0x13
  • 2,007
  • 3
  • 23
  • 38
  • 13
    Note: most browsers trigger the default scrolling behaviour *on "keydown", not "keyup"*. – iono Dec 03 '18 at 17:30
  • @iono switching my addEventListener to listen for keydown instead of keyup was the trick!! Thank you! I had added e.preventDefault but the page still scrolled because it was scrolling on the keydown while I was preventing it from scrolling on the keyup. – Tyler Youngblood Oct 06 '20 at 14:55

5 Answers5

97

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>

Demo

Oriol
  • 274,082
  • 63
  • 437
  • 513
2

You could look into e.target and if it is the body you return false.

window.onkeydown = function(e) { 
  return !(e.keyCode == 32 && e.target == document.body);
};
Stephan
  • 327
  • 3
  • 11
  • I think you meant "*if it is the body you return `false`*" :) – Oriol Mar 21 '14 at 15:21
  • you need to preventDefault on the event to stop the scrolling. – Aurovrata Jan 27 '21 at 02:08
  • 3
    Update (in 2021): According to [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) e.keyCode is deprecated. Now you can do it this way: `window.onkeydown = function(e) {return !(e.key == ' ' && e.target == document.body);};`. Tested with Firefox 90 and Chromium 92. –  Jul 24 '21 at 14:16
1

You can check the target of the event, and only run your code if it's not a 'type-able' element. For example:

window.onkeydown = function(e) {
    var elem = e.target.nodename;
    if( elem !== 'TEXTAREA' && elem != 'INPUT' ) {
        return !(e.keyCode == 32);
    }
};
Brian Glaz
  • 15,468
  • 4
  • 37
  • 55
0
window.onkeydown = function(e) { 
    e = e || window.event;  //normalize the evebnt for IE
    var target = e.srcElement || e.target;  //Get the element that event was triggered on
    var tagName = target.tagName;  //get the tag name of the element [could also just compare elements]
    return !(tagName==="BODY" && e.keyCode == 32);  //see if it was body and space
};
epascarello
  • 204,599
  • 20
  • 195
  • 236
0

CSS:

body::-webkit-scrollbar {display: none;} /* Chrome, Safari and Opera */
body {-ms-overflow-style: none;}  /* IE and Edge */
html {scrollbar-width: none;}  /* Firefox */

JavaScript:

window.addEventListener('keydown', function() {if (event.keyCode == 32) {document.body.style.overflow = "hidden";}});
window.addEventListener('keyup', function() {if (event.keyCode == 32) {document.body.style.overflow = "auto";}});

JavaScript makes the overflow hidden onkeydown event when the spacebar is pressed so it can't be scrolled and when you leave the spacebar it makes the overflow auto so it can be scrolled again. This changes the width of the page so the CSS can be added to disappear the scrollbar.

Chris54
  • 1
  • 1