How to Prevent the Pressing of the Space Bar from Scrolling the Page with JavaScript?

To prevent the pressing of the space bar from scrolling the page with JavaScript, we can listen to the keydown event with window.addEventListener .

Then in the event handler, we can detect pressing the space bar on the body element.

For instance, we can write:

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

We call window.addEventListener with 'keydown' and an event listener that detects presses of the space bar on the body element.

Key code 32 is the space bar and e.keyCode has the numeric code of the key that’s pressed.

e.target has the element that the keydown event is emitted from. And we compare that against the body element with document.body .

e.preventDefault prevents the default behavior when the space bar is pressed, which is to scroll the page.