Scroll area with overflow in CSS
Small Scrollable Areas
Scrollable areas on webpages has become increasingly popular after being used by some leading design communities on the internet. Scrollbars can be done with a textarea or iframe tags, but a more frequent way of doing it is through using the abilities that already lies within HTML and CSS for any page element.
A normal block element, like a <div> can be set to a certain height and width. What happens when the content of the DIV exceeds the size given to it?
Enter the CSS property 'overflow'.
- overflow: auto - This will create a scrollbar - horizontal, vertical or both only if the content in the block requires it. For practical web development, this is probably the most useful approach to creating a scrollbar.
- overflow: scroll - This will will insert horizontal and vertical scrollbars. They will become active only if the content requires it.
- overflow: visible - This will cause the content of the block to expand outside of it and be visible at the same time.
- overflow: hidden - This forces the block to only show content that fits in the block. Other content will be clipped and not visible. There will be no scrollbars.
About background-image in all this
It is not possible to find a cross-browser way of applying a background image to this scrollable area. If you'd like to read more about why, you can read the excellent documentation provided by Peter-Paul Koch at Quirckmode.
Give me feedback on this page/code
Example:
This is a scrolling area created by using the CSS property overflow in a html block element.
This is red color Basically you can use any normal HTML tags in this block element like you usually would.
You can use images:
This is big bold text.
This scrolling area can contain normal html like this link
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
CSS:
<style type="text/css">
<!--
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
-->
</style>
HTML:
<div class="scroll">
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>
<span style="color: red;">This is red color</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>This is a normal paragraph.
<span style="font-weight: bold; font-size: 22px;">This is big bold text</span>
</p>
<p>This scrolling are can contain normal html like <a href="index.php">link</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>