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!