How to Hide Scrollbars with CSS
Hiding the scrollbars on a web page that you are designing may be quite useful in some cases. In this tutorial, I will demonstrate how to hide vertical and horizontal scrollbars the browsers autmatically display for overflowing content, by a couple of CSS examples.
When you open a web page in any web browser, the default behavior is that if the page content fits inside the browser window in terms of width and height, the browser will not display any scrollbars. However, if the page content overflows (exceeds) the visible browser window area, then the scrollbars will be displayed.
If the content is higher than the browser window, a vertical scrollbar will be displayed on the right side of the browser. If the content is wider than the browser window, a horizontal scrollbar will be displayed at the bottom of the browser. If both cases are true, both scrollbars will be displayed at the same time. The same behavior is also observed for page elements that don't cover the full page such as iframes, textareas or regular divisions with overflowing content.
While, interfering the default behavior of web browsers, which is the behavior users are accustomed to, is not a recommended web design practice, in some cases it becomes a necessity. For example, an element may be covering a very small area on the page, in which case an additional scrollbar to be displayed in that element's area when its content overflows may make it difficult to view. Or, scrolling may not be your intended action for the user on a page, hence the removal of the scrollbar may make sense.
TIP: Here is a list of websites where you can find helpful web design tutorials.
Now, let's see how the scrollbars can be hidden with the help of CSS
Using CSS Overflow Property for Hiding Scrollbars
The overflow property in CSS allows us to control the flow of the content beyond its borders. Consider the following textarea element with fixed width and height and with content that fits into its area nicely, hence no scrollbars:
If we add more text to that fixed sized textarea element, a vertical scrollbar will be automatically displayed:
To hide the scrollbar, we use the overflow property like the following:
Which will result in:
The scrollbar will be removed, but you can still navigate within the content of the textarea using the arrow keys or PgUp/PgDn keys after clicking inside the textarea. The vertical scrollbar can also be removed using the overflow-y property:
The following div element with an image inside which is wider than the div itself, displays a horizontal scrollbar.
To hide the horizontal scrollbar, we use the overflow-x property.
The div with the overflowing image will now display like this:
This is basically how you can easily hide the horizontal and vertical scrollbars on a page or on any element using the overlow, overflow-x and overflow-y CSS properties.
Finally, don't forget to preview your websites after hiding the scrollbars and make sure that they function as intended on both desktop and mobile devices and browser, at least by using mobile phone simulators.
More CSS Tips
CSS Full Screen Video Background Tutorial CSS Full Screen Background Image Tutorial How to Import a CSS File into Another CSS File CSS Div with Background Image Tutorial CSS Div with Background Video Tutorial CSS Basics Part 12: CSS Tables CSS Basics Part 11: CSS Lists CSS Basics Part 10: CSS Links CSS Basics Part 9: CSS Borders CSS Basics Part 8: CSS BackgroundsCSS Tips