How to Hide Scrollbars with CSS

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.

Regardless of your reasons for hiding the scrollbars with CSS, you should still keep cross-browser compatibility in mind and plan and test your design, by avoiding bad web design practices.

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:

Scrollbars can be hidden using the overflow property of CSS.

If we add more text to that fixed sized textarea element, a vertical scrollbar will be automatically displayed:

Scrollbars can be hidden using the overflow property of CSS. To hide a scrollbar, you will need to apply overflow on an element.

To hide the scrollbar, we use the overflow property like the following:

textarea {
  overflow: hidden;
}

Which will result in:

Scrollbars can be hidden using the overflow property of CSS. To hide a scrollbar, you will need to apply overflow on an element.

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:

textarea {
  overflow-y: hidden;
}

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.

div {
  overflow-x: hidden;
}

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.

TIP: If you want to hide the browser scrollbars on all websites while browsing, depending on which browser you are using, you can apply custom user styles in Chrome or custom user styles in Firefox.

f t g+ in