Quackit Logo
HTML
CSS
Scripting
Database
Hosting
Design
XML
Website builder

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 page?

  1. Add this page to your Favorites
  2. Link to this page (copy/paste into your own website or blog):
  3. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!