Horizontal Scrollbar Code

Example Code


<!-- Codes by HTMLmagics -->
<div style="border:1px solid black;width:200px;height:150px;overflow-x:scroll;overflow-y:hide;">
<p style="background-color:Cornsilk;width:200%;">Here's a demonstration of how to make a scroll box with a horizontal scrollbar. Note that to demonstrate the scrollbar properly, I've made this text wider than the actual scroll box.</p>
</div>
<p><a  style="font-size:11px;color:#999;" href="http://htmlmagics.blogspot.com/scroll-boxes/horizontal-scrollbar.cfm">Horizontal Scroll bar</a></p>


Result

Here's a demonstration of how to make a scroll box with a horizontal scrollbar. Note that to demonstrate the scrollbar properly, I've made this text wider than the actual scroll box.

Vertical Scrollbar Code

Example Code


<!-- Codes by HTMLmagics -->
<div style="border:1px solid black;width:200px;height:150px;overflow-y:scroll;overflow-x:hide;">
<p style="background-color:Cornsilk;height:200%;">Here's a demonstration of how to make a scroll box with a vertical scrollbar. Note that to demonstrate the scrollbar properly, I've made this text higher than the actual scroll box.</p>
</div>
<p><a  style="font-size:11px;color:#999;" href="http://htmlmagics.blogspot.com/scroll-boxes/vertical-scrollbar.cfm">Vertical scroll bars</a></p>


Result

Here's a demonstration of how to make a scroll box with a vertical scrollbar. Note that to demonstrate the scrollbar properly, I've made this text higher than the actual scroll box.

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 />

Auto Scroll Bars

Example Code



<!-- Codes by HTMLmagics -->
<div style="border:1px solid black;width:150px;height:150px;overflow:auto;">
<p>Not much text = no scroll bars.</p>
</div>
<p><a  style="font-size:11px;color:#999;" href="http://htmlmagics.blogspot.com/scroll-boxes/scroll-box-code.cfm">Scrollbox Code</a></p>

Result

Not much text = no scroll bars.

Force Scroll Bars

Example Code


<!-- Codes by HTMLmagics -->
<div style="border:1px solid black;width:300px;height:150px;overflow:scroll;">
<p>Here's a demonstration of how to make a scroll box. This scroll box contains scroll bars (or at least scroll tracks) even when the content is smaller than the scroll box.</p>
</div>
<p><a  style="font-size:11px;color:#999;" href="http://htmlmagics.blogspot.com/scroll-boxes/scroll-box-code.cfm">Scrollbox Code</a></p>



Result

Here's a demonstration of how to make a scroll box. This scroll box contains scroll bars (or at least scroll tracks) even when the content is smaller than the scroll box.