How to remove page scroll with CSS

In this article we will learn a practical and easy way to remove page scroll with CSS, without JavaScript.

Hey you all programmers, okay? Let’s learn something new!

Sometimes we need to lock the page’s scroll, to limit user action, for example when we want to show a pop up

Then the user must focus on this pop up and lose access to other actions on the page, such as the scroll

And to our delight, with CSS, it’s very easy to strip the scroll functionality off the screen.

We just need to use the overflow rule on the body with the value “hidden”

The overflow property controls how the content from the user’s screen is displayed, if it is set to hidden, it becomes hidden

That is, the browser understands that it has nothing but the screen and hides scroll bar

Check out this  working example:

html, body {
 overflow: hidden;
}

With this rule applied, the page scroll will no longer work the way it should

And it prevents the user from scrolling through the page

Note: Use this only in extremely necessary cases, removing user behaviors already known from a page can make them never return to your site!

Conclusion

In this article we learned how to remove the scroll from the page with the overflow property added to the body, with the value ”hidden”

This will make the HTML understand that there is no content other than what appears on the screen and removes scroll functionality

Want to learn more about HTML and CSS? Click here!