This page demonstrates how to hide the scrollbar from an HTML element.
You can use CSS code to remove scrollbars from any element on which scrollbars may appear. These elements include the
div element, the
iframe element, a
textarea tag, and even the
html tags (to hide the browser's scrollbars).
textarea element is normally used to enable your website visitors to enter text (so that they can provide feedback, post comments, etc). By default, the
textarea element comes with a vertical scrollbar (and maybe even a horizontal scrollbar). This vertical scrollbar enables the user to continue entering and reviewing their text (by scrolling up and down).
To hide this vertical scrollbar (and the horizontal scrollbar if that appears too), you need to use the CSS
overflow property, with a value of
It's important to note that, even though the scrollbars are hidden, the user can still enter as much data as they want. The hidden scroll bars simply prevent the user from scrolling down to see their own comments.
Browser Scrollbars - Hide
The same principle can be used to remove the browser's scrollbars. When the content on the page takes up more than the height of the browser, any scrollbars that would normally appear will be hidden. In this example, the
html element has the
overflow property added to it with a value of
Here's an example using hidden scrollbars.
Browser Scrollbars - Auto
Hiding the browser's scrollbars is all good and well, but this can be a major usability issue. After all, your users can't scroll down to see your content under the fold.
Many webmasters prefer to remove the scrollbars when they're not needed, but make them appear when they are needed.
Doing this is almost exactly the same as hiding the scroll bars (as above). The only difference is that the
overflow property is set to
auto instead of
Here's an example using auto scrollbars.
iframe element allows you to create an inline frame. An inline frame presents the contents of another page within a frameset within the page. At first glance, the inline frame usually appears as a scroll box - with scrollbars. That is, unless you remove the scrollbars.
There are several methods for hiding the scrollbars from an inline frame. Here they are:
scrolling="no". This is how to remove iframe scrollbars in HTML 4.1 (the current version of HTML at the time of writing).
overflow:hidden. This is how to hide scrollbars using CSS (Cascading Style Sheets)
seamless="seamless". This attribute was introduced in the HTML version 5 working draft. Therefore, to cater for future browsers, this code should be included.
Which one to use?
You can safely use all three at the same time. Having said that, if you prefer to validate your webpages using the W3C validator, you should only use the method that aligns with the version of HTML that you are validating against. Therefore, if you're using HTML 4.1, use
scrolling="no". If you're using HTML 5, use
In any case, you can also use
overflow:hidden along with any other code. Actually, you will usually find that this overrides the HTML and hides any scrollbars that have been defined.
Here's an example using
You an also use
scrolling="auto" to display scrollbars only when they're needed (when using HTML 4.1). The CSS equivalent is
For more information on inline frames, see the
iframe tag (HTML 4.1) and the
iframe tag (HTML 5 version)