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: