HTML Scroll Box

An HTML scroll box is a box that adds scroll bars to the right side and bottom when the contents of the box are larger than the box dimensions. In other words, if you have a box that can fit around 50 words, and you have text of 200 words, an HTML scroll box will put scroll bars up to let you see the additional 150 words. In standard HTML that would simply push the extra text outside of the box.

Making HTML scroll is fairly easy. You just need to set the width and height of the element you want to scroll and then use the CSS overflow property to set how you want the scrolling to occur.

What to Do with Extra Text?

When you have more text than will fit in the space on your layout, you have a few options:

• Rewrite the text so that it is shorter and will fit.
• Allow the text to flow beyond the bounds and hope the layout can flex to support it.
• Cut off the text where it overflows.
• Add scroll bars (usually vertical for text) so that the space scrolls to show the extra text.

The best option is typically the last option: create a scrolling text box. Then the extra text can still be read, but your design is not compromised.

HTML and CSS for this would be:

text here....

The overflow: auto; tells the browser to add scroll bars if they are needed to keep the text from overflowing the boundaries of the div. But in order for this to work, you also need the width and height style properties set on the div, so that there are boundaries to overflow.

You can also cut off the text by changing overflow: auto; to overflow: hidden; If you leave out the overflow property, the text will spill over the boundaries of the div.

You Can Add Scroll Bars to More than Just Text

If you have a large image that you'd like to display in a smaller space, you can add scroll bars around it in the same way you would with text.

In this example, the 400x509 image is inside a 300x300 paragraph.

Tables Can Benefit from Scroll Bars

Long tables of information can get very difficult to read very quickly, but by putting them inside a div of limited size and then adding the overflow property, you can generate tables with lots of data that don't take up extreme space on your page.

The easiest way is just like with images and text, just add a div around the table, set the width and height of that div, and add the overflow property:

  

Name

Phone

Jennifer

502-5366

....

One thing that happens when you do this is a horizontal scroll bar usually appears because the browser assumes that the chrome of the scroll bars is overlapping the table. There are many ways to fix this from changing the width of the table and others. But our favorite is to simply turn off horizontal scrolling with the CSS 3 property overflow-x

Just add overflow-x: hidden; to the div, and that will remove the horizontal scroll bar. Be sure to test this, as there might be content that disappears.

Firefox Supports Using the TBODY Tags for Overflow

One really nice feature of the Firefox browser is that you can use the overflow property on inner table tags like tbody and thead or tfoot. This means that you can set scroll bars on the table contents, and the header cells stay anchored above them. This only works in Firefox, which is too bad, but it is a nice feature if your readers only use Firefox. Browse to this example in Firefox to see what I mean.

...NamePhoneJennifer502-5366

Name

Phone

Jennifer

502-5366

...