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 Code

Result

<!-- Codes by HTMLcodes.me -->
            <textarea rows="10" cols="20" style="width:150px;height:150px;">
            WITH SCROLLBARS...
            When the text in this text box becomes larger than the box, the default behavior for the browser is to grow scrollbars (or at least, a vertical scrollbar).
            Go on, type some text until the scrollbars appear!
            </textarea>
            <textarea rows="10" cols="20" style="width:150px;height:150px;overflow:hidden;">
            WITHOUT SCROLLBARS...
            To remove scrollbars from this box, we use 'overflow:hide'. This box is wider and higher than the containing block, therefore, scrollbars would normally have appeared.
            Go ahead... type some text and see what happens when the text overflows the box!
            </textarea>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/scroll-boxes/hide-scrollbar.cfm">Hide scroll bar</a></p>

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: