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.

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.

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 CodeResult

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 CodeResult

Not much text = no scroll bars.

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

Source CodeResult

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.

About the HTML Codes

The HTML code on this page is provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

External Style Sheets

Most of the HTML codes on this website use inline CSS. If you intend to use the codes across your whole website, you should place the CSS into an external style sheet.

To learn more, check out this explanation of external style sheets.

Web Hosting

Our partner site, ZappyHost, is a professional web hosting company providing website hosting, domain names and related products. If you need web hosting, check them out!