Hide Scrollbar Code

Example Code


<!-- Codes by HTMLmagics -->
<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://htmlmagics.blogspot.com/scroll-boxes/hide-scrollbar.cfm">Hide scroll bar</a></p>


Result

<br /> WITH SCROLLBARS... <br /> <br /> 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). <br /> <br /> Go on, type some text until the scrollbars appear!<br />
<br /> WITHOUT SCROLLBARS... <br /> <br /> 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. <br /> <br /> Go ahead... type some text and see what happens when the text overflows the box!<br />