Hide Scrollbar

When you add a text box to your website, scrollbars automatically appear once the text takes up more room than the text box. In most cases, this is fine - after all, the user should be able to scroll down to see more content right? Sometimes, however, you might not want the scrollbars to appear. This could be for any reason, and far be it for me to say why you shouldn't hide the scrollbars from your users!

This page contains code that allows you to hide scrollbars. If the content becomes to big for the box, too bad - the user only sees what you want them to see!

Feel free to copy and paste the following "hide scrollbar" code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.

Also, please consider keeping the link back to this website - if you do it will be very much appreciated!

Basic Hide Scrollbar Code

Below are two textarea elements that contain more text than can fit into its containing block. The first example demonstrates the browser's default behavior. By default, the textarea grows scrollbars (at least, a vertial scrollbar) whenever the text overflows the box. The second textarea however, does not grow the vertical scrollbar. This is because we hide the scrollbar.

To hide the scrollbar, we use overflow: hidden. This basically tells the browser that if there's any overflow in the box, hide any scrollbars that would have appeared.

Source CodeResult

Hide Browser Scrollbars (on Whole Web Page)

You can use the same method remove the browser's vertical scrollbars. To do this, simply apply overflow: hide to the body tag.

To see an example of a browser window with scrollbars removed, check out this example (opens in new window).

And, here is the code that I used for the above example:

About the HTML Codes

The HTML code on this page is provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

External Style Sheets

Most of the HTML codes on this website use inline CSS. If you intend to use the codes across your whole website, you should place the CSS into an external style sheet.

To learn more, check out this explanation of external style sheets.

Web Hosting

Our partner site, ZappyHost, is a professional web hosting company providing website hosting, domain names and related products. If you need web hosting, check them out!