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:

CodeResult

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:

Copy to Clipboard
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html {
overflow:hidden;
}
</style>
<title>Hide Scrollbar Example</title>
</head>
<body>
<h1>Hide Scrollbar Example</h1>
<div style="height:400px;width:400px;background-color:silver;padding:3px;">
<p>This 'div' is 400 pixels high and 400 pixels high. Try resizing your browser so that it is less than 400 pixels. You will notice that no scrollbars appear. This is because we've applied <a href="/css/properties/css_overflow.cfm"><code>overflow:hidden</code></a> to the <a href="/html/tags/html_body_tag.cfm"><code>body</code></a> tag.</p>
<p>If we were to remove <code>overflow:hidden</code>, scrollbars would automatically appear once the content became too large.</p>
</div>
<p><a href="http://www.quackit.com/html/codes/hide_scrollbar.cfm" rel="nofollow">Back</a></p>
</body>
</html>

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:

Copy to Clipboard
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html {
overflow:auto;
}
</style>
<title>Auto Scrollbar Example</title>
</head>
<body>
<h1>Auto Scrollbar Example</h1>
<div style="height:400px;width:400px;background-color:silver;padding:3px;">
<p>This 'div' is 400 pixels high and 400 pixels high. If your browser is maximized to larger than 400x400, no scrollbars should be appearing. Try resizing your browser so that it is less than 400 pixels. Scrollbars should appear - they will only appear when they're needed. This is because we've applied <a href="/css/properties/css_overflow.cfm"><code>overflow:auto</code></a> to the <a href="/html/tags/html_html_tag.cfm"><code>html</code></a> tag.</p>
</div>
<p><a href="http://www.quackit.com/html/codes/hide_scrollbar.cfm" rel="nofollow">Back</a></p>
</body>
</html>

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:

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:

CodeResult

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)

Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites

Check a Domain:

ZappyHost Logo
Webydo Banner Ad
Webydo Banner Ad