HTML Scrollbox

This page contains HTML scrollbox code and examples. You can copy/paste this code into your website or blog.

What is an HTML Scrollbox?

An HTML scrollbox is basically a box with scrollbars. Usually the scrollbox is made using the HTML <div> tag and the scrollbars are defined using the CSS overflow property.

Although you could probably argue that an HTML textbox is a scrollbox - because it has scrollbars - on this page we will concentrate on the <div> type of scrollbox.

Scrollbox Example

Here's an example of a basic HTML scrollbox. Here, we use overflow:scroll to tell the browser to add scrollbars to the box (i.e. the <div> element).

Source Code	Result
<div style="width:150px;height:150px;line-height:3em;overflow:scroll;padding:5px;"> This 'div' element uses 'overflow:scroll' to create scrollbars. </div>	This 'div' element uses 'overflow:scroll' to create scrollbars.

Auto Scrollbars

In the above example we used overflow:scroll to add scrollbars to the box. Another option is to use overflow:auto.

By using overflow:auto, the box will only grow scrollbars if the contents are too big to fit inside. In other words, scrollbars will only appear when they're needed.

To demonstrate this, the following boxes use exactly the same code to define the scrollbox. The only difference between the two, is the size of their contents. The first box only has one small line of text, whereas, the second box has many lines of text - too many to fit inside the box. Therefore, the second box displays scrollbars and the first box doesn't.

First Box: Less Contents = No Scrollbar:

Source Code	Result
<div style="width:150px;height:150px;line-height:3em;overflow:auto;padding:5px;"> One small line of text. </div>	One small line of text.

Second Box: More Contents = Scrollbar:

Source Code	Result
<div style="width:150px;height:150px;line-height:3em;overflow:auto;padding:5px;"> This 'div' element contains more content than the previous one. Because there's too much text to fit into the box, the box grows scrollbars. </div>	This 'div' element contains more content than the previous one. Because there's too much text to fit into the box, the box grows scrollbars.

Scrollbox Color

You can change the color of your scrollboxes, their contents, and their scrollbars. Like this:

Source Code	Result
<div style="width:150px;height:150px;line-height:3em;overflow:scroll;padding:5px;background-color:#FCFADD;color:#714D03;scrollbar-base-color:#DEBB07;"> This 'div' element uses 'overflow:scroll' to create scrollbars whenever the contents of the 'div' become too large. </div>	This 'div' element uses 'overflow:scroll' to create scrollbars whenever the contents of the 'div' become too large.

Here's more info about scrollbox color.

Scrollbox Border

You can change the color, style, and width of your scrollbox borders using the CSS border property. Example:

Source Code	Result
<div style="width:150px;height:150px;line-height:3em;overflow:scroll;padding:5px;background-color:#FCFADD;color:#714D03;border:4px double #DEBB07;"> This 'div' element uses 'overflow:scroll' to create scrollbars whenever the contents of the 'div' become too large. </div>	This 'div' element uses 'overflow:scroll' to create scrollbars whenever the contents of the 'div' become too large.

Here's more information about scrollbox borders.