On a web page, if you hit the spacebar key on your keyboard, the web page will scroll down. This is a default browser behavior. So you can’t stop it using CSS.

But you can do it using JavasScript. Don’t worry if you’re new to JavaScript. It’s only a few lines of code and works without any dependencies.

How to prevent the spacebar from scrolling?

To prevent the spacebar from scrolling the web page, write the following JavaScript:

window.addEventListener("keydown", function (e) {
  if (e.keyCode === 32) {

That’s it!

Explanation of the above JavaScript

keydown is an event. Every key on your computer keyboard has a unique number. In our case, it’s the spacebar key which has a number of 32. And this is what we are checking in the if condition. You can find any key’s number here.

Anyways, preventDefault is a method. And it tells the web browser to stop its default behavior. This is exactly what we are doing.

Inside the function, “e” is a parameter that is short for the event. However, you can name it anything. Once this event (keydown) is true, the function will pass the parameter (e).

All this is saying is if the keypress/key-down is equal to the spacebar (32) then prevent its default behavior.

That’s all.

Build HTML CSS projects

About us templatePreview
Team pagePreview
Testimonial pagePreview
Testimonial sliderPreview
Contact pagePreview
Multipage websitePreview
Portfolio websitePreview
Animated portfolioPreview
Computer science portfolioPreview
Navigation bar (without JS)N/A
Create a hamburger menuPreview
Create a navigation menu in two waysN/A
Footer templatesPreview
Hero bannerPreview
Background sliderPreview
Card templates (HTML, CSS)Preview
Animated cardsPreview
Three-column layout templatePreview
Two column layoutPreview
Breadcrumb navigationN/A
Progress bar templatePreview
Thank you pagePreview
Resume templatePreview
Coming soon templatePreview
Landing page templatePreview
Roofing website templatePreview