Quackit Logo
HTML
CSS
Scripting
Database
Hosting
Design
XML

Print Version

CSS Scrollbars

You can use CSS to create your own "inline scrollbars" by creating a box smaller than its contents by specifying overflow:scroll. This has an effect similar to inline frames (but using CSS is much simpler).

Example

Why do I call them "CSS Scrollbars"? The <i>CSS Overflow</i> property tells the browser what to do if the box's contents is larger than the box itself. It behaves similar to inline frames and creates scrollbars if required. That is why I call them CSS Scrollbars!

This is acheived by using the following code:

<style>
.contentBox {
	display:block;
	border-width: 1px;
	border-style: solid;
	border-color: 000;
	padding:5px;
	margin-top:5px;
	width:200px;
	height:50px;
	overflow:scroll
	}
</style>
<div class="contentBox">
Why do I call them "CSS Scrollbars"? The <i>CSS Overflow</i>
property tells the browser what to do if the box's contents is larger
than the box itself. It behaves similar to inline frames and creates
scrollbars if required. That is why I call them CSS Scrollbars!
</div>

The overflow property tells the browser what to do if the box's contents is larger than the box itself. You can also specify hidden to hide contents that don't fit into the box and visible to automatically expand the box to fit the contents (this is the default setting)

Enjoy this website?

  • Share
  • Add this page to your Favorites
  • Link to this page (copy/paste into your own website or blog):
  • Link to Quackit using one of these banner ads.
  • Help support Quackit by making a donation

Oh, and thank you for supporting Quackit!

© Copyright 2000 - 2010 Quackit.com