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:
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:
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.