CSS Scrollbars

You can use CSS to create your own "inline scrollbars" by creating a box smaller than its contents. You can do this using the overflow property. Specifically, you can use overflow:scroll to force scrollbars to appear when the content overflows. This has an effect similar to inline frames (but using CSS is much simpler).

Example

CodeResult

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!

The overflow property tells the browser what to do if the box's contents is larger than the box itself. You can also specify auto, which will hide the scrollbars if the content doesn't overflow, but display them if the content does overflow. You can also use 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?