Scrollable box without using an iframe

Here’s a super simple CSS tip to create a scrollable box on your website, without having to use the dreaded iframe tag. Scrollable boxes are great for cramming lots of content into a small space. They are perfect for announcements or short news feeds.

The solution which forms the basis of this technique is the overflow attribute. It can be set to .scrollable { width:250px; height:300px; overflow:scroll; }

Give a div the class you specified above and you’re good to go.
<div class="scrollable">
[Put your content here]
</div>

Example 1:

Ornatus omittam scaevola eos ea, eu his amet quas insolens, nam alii honestatis appellantur id. Vim eirmod imperdiet delicatissimi an, quo pertinax inimicus consetetur at. Id facete euismod mel. Quo mandamus eloquentiam et. Nam ad consul malorum ullamcorper, has ea bonorum verterem. In accusam dissentiunt est, id eos prima mutat solum. Everti percipitur ne vel, ea ubique legimus vix.
Lorem ipsum sea ad molestiae similique repudiandae, qui et habeo reque nonumy. Placerat efficiantur vim ex, eam nulla maiestatis definitiones ei. Duo et inermis definitiones, an vix omittam offendit. At cum noster aliquando constituam. Suas eripuit qui eu, et eam copiosae dissentiet. Labores delicata ad sea, in soluta definitiones eam. Et mea solet nonummy.

The problem with setting overflow:scroll is that it creates both vertical and horizontal scroll bars and often the horizontal bar is not required (or desired).

A better idea is to set overflow-y:scroll (or overflow-x if you need horizontal only scrolling) leaving you with the desired effect.

Example 2:

Ornatus omittam scaevola eos ea, eu his amet quas insolens, nam alii honestatis appellantur id. Vim eirmod imperdiet delicatissimi an, quo pertinax inimicus consetetur at. Id facete euismod mel. Quo mandamus eloquentiam et. Nam ad consul malorum ullamcorper, has ea bonorum verterem. In accusam dissentiunt est, id eos prima mutat solum. Everti percipitur ne vel, ea ubique legimus vix.
Lorem ipsum sea ad molestiae similique repudiandae, qui et habeo reque nonumy. Placerat efficiantur vim ex, eam nulla maiestatis definitiones ei. Duo et inermis definitiones, an vix omittam offendit. At cum noster aliquando constituam. Suas eripuit qui eu, et eam copiosae dissentiet. Labores delicata ad sea, in soluta definitiones eam. Et mea solet nonummy.

Let us know what you think in the comments here or on Facebook.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.