Hide Scrollbar
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 body or html tags (to hide the browser's scrollbars).
Hide textarea Scrollbars
A 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 hidden.
Example:
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 hidden.
Example:
Here's an example using hidden scrollbars.
Code:
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 hidden.
Example:
Here's an example using auto scrollbars.
HTML code:
Hide iFrame Scrollbars
The HTML 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:
- Using
scrolling="no". This is how to remove iframe scrollbars in HTML 4.1 (the current version of HTML at the time of writing). - Using
overflow:hidden. This is how to hide scrollbars using CSS (Cascading Style Sheets) - Using
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 seamless="seamless".
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.
Example
Here's an example using scrolling="no" and overflow:hidden:
You an also use scrolling="auto" to display scrollbars only when they're needed (when using HTML 4.1). The CSS equivalent is overflow:auto.
For more information on inline frames, see the iframe tag (HTML 4.1) and the iframe tag (HTML 5 version)