Recently I’m seeing quite a few people asking how to remove scrollbars from their page, both vertical and horizontal scrollbars. What I’m going to explain isn’t just for removing scrollbars but can also be used to make them appear permanently.
Go with the Overflow
CSS Overflow is the property that controls the overflow of a block element, overflowing content is what causes the creation of the scrollbars. There is also Overflow-X and Overflow-Y, both can be used to remove scrollbars, depending on which one you want to remove..
Firstly the available values for these properties are (bar some obscure options):
- Visible: this will display the overflowing content beyond the parents boundaries
- Hidden: will hide the overflowing content without re-sizing it
- Scroll: will apply scrollbars to the element – overflowing or not
- Auto: which will apply horizontal, vertical or both scrollbars is necessary
Overflow-y – to remove vertical scrollbars
This controls the vertical overflow. Lets have a few examples……
overflow-y:visible
Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that ****? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they’re actually proud of that ****.
overflow-y:hidden
Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We’re on the same curve, just on opposite ends.
overflow-y:scroll
Well, the way they make shows is, they make one show. That show’s called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they’re going to make more shows. Some pilots get picked and become television programs. Some don’t, become nothing. She starred in one of the ones that became nothing.
overflow-y:auto
Look, just because I don’t be givin’ no man a foot massage don’t make it right for Marsellus to throw Antwone into a glass mother******’ house, ******’ up the way the ****** talks. Mother****** do that **** to me, he better paralyze my ass, ’cause I’ll kill the mother******, know what I’m sayin’?
Overflow-x – to remove horizontal scrollbars
This controls the horizontal overflow. Quick note, I also used “white-space: nowrap” here to prevent the line wrapping onto the next line which would be the default behavior. So, a few examples……
overflow-x:visible
Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime.
overflow-x:hidden
Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We’re on the same curve, just on opposite ends.
overflow-x:scroll
Well, the way they make shows is, they make one show. That show’s called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they’re going to make more shows. Some pilots get picked and become television programs. Some don’t, become nothing. She starred in one of the ones that became nothing.
overflow-x:auto
Look, just because I don’t be givin’ no man a foot massage don’t make it right for Marsellus to throw Antwone into a glass mother******’ house, ******’ up the way the ****** talks. Mother****** do that **** to me, he better paralyze my ass, ’cause I’ll kill the mother******, know what I’m sayin’?
Where can I use overflow?
You can apply these overflow styles to any block element, including <body> which is where you will be able to prevent them scrollbars appearing when you really don’t want them!
….. slipsum (Samuel L. Jackson lorem ipsum) provided by Slipsum Generator