CSS Scroller

If the layout of your web page doesn’t allow for lots of text and images and you have plenty of material that you want to include, then it’s a good idea to encapsulate that content into a scrollable region within your design.

In the past, this problem has been solved via the use of HTMLFrames‘ and ‘iFrames‘, but such technology is incredible inhibiting with regards to the search engine indexing process, is considered as ‘old-hat’ by all competent web-designers and should be avoided for front end content.

CSS, on the other hand offers an entirely simple, accessible and Search Engine Optimisation (SEO) safe solution. It will present the front end user with an experience similiar to that found with problematic ‘iFrames’, but without the negitive effects.


.scroller { z-index: 10; overflow: auto; height: 500px; width: 500px; }


<div class="scroller">
...your content for scrolling...