Scroll Box Code

This page contains scroll box code. Feel free to copy and paste the scroll box 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!

This page demonstrates some of the different ways that you can configure your scroll boxes. The scroll box code you use will depend on how you want your scroll box to look and behave. Generally, for the most common tasks, the scroll box code doesn't change much.

Basic Scroll Box Code

Force Scroll Bars

The following example demonstrates what the basic HTML scroll box code does. Here, we place text into a div tag. But, we choose to turn the div into a scroll box. We do this using overflow:scroll.

Source Code

Result

<!-- Codes by HTMLcodes.me -->
            <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://www.htmlcodes.me/scroll-boxes/scroll-box-code.cfm">Scrollbox Code</a></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.

Auto Scroll Bars

In these examples, the scroll bars only appear when they need to (i.e. when the box has too much text). Therefore, if the text doesn't overflow, no scroll bars will appear. Use overflow:auto to make the scroll bars appear only when they need to.

Both of the examples here use the same scroll box code. The only difference is in the amount of text within each scroll box. The text in the first example fits well within the scroll box - therefore, no scroll bars appear. The text in the second example is too big for the box, therefore, scroll bars appear.

Source Code	Result
<!-- Codes by HTMLcodes.me --> <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://www.htmlcodes.me/scroll-boxes/scroll-box-code.cfm">Scrollbox Code</a></p>	Not much text = no scroll bars.

The following example uses the same scroll box code, but this time with more text:

Source Code

Result

<!-- Codes by HTMLcodes.me -->
            <div style="border:1px solid black;width:150px;height:150px;overflow:auto;">
            <p>This scroll box grows scroll bars when the content is larger than the scroll box.</p>
            <p>This uses the same scroll box code that the above example uses. The only difference is that this  scroll box contains more text.</p>
            </div>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/scroll-boxes/scroll-box-code.cfm">Scrollbox Code</a></p>

This scroll box grows scroll bars when the content is larger than the scroll box.

This uses the same scroll box code that the above example uses. The only difference is that this scroll box contains more text.