CSS Scrollbars

CSS Scrollbars

Related:
• Hide Scrollbar
• HTML Scrollbox

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)