In some cases having scrolling on our web pages can be annoying for our users. Or, at least, that’s what certain designers say. Although, it seems like a very useful element to me. But let’s see how we can remove the scroll from our web page.
If you find yourself in a situation in which you have to remove the scroll, you can follow a series of steps and relying on the language CSS. The idea is to play with the overflow. The overflow controls what happens when content overflows the area it is in. If we apply it at the level of the entire page, it will be when the content exceeds the size of the window.
The values that the overflow would be:
- visible, protruding content is not cut off. It is rendered outside the area it was assigned to. This is the default value.
- hidden, the overflow is clipped, and the rest of the content will be invisible
- scroll, the content that stands out is cut off, but a scrollbar is added that allows us to reach the rest of the content.
- auto, if the overhanging content is cut off, a scrollbar is added to see the rest of the content.content
- inherit, the value will be inherited from the parent element.
In our case we are going to assign the value hidden. That is, we will cut the content that stands out. Consequently, the browser will not need to put a scroll bar.
The code to use would be the following:
<style type="text/css">
html,body {
overflow:hidden;
}
</style>