|
|
by ranjan
I have been designing and developing web applications for 7 years + in India, Australia and USA.
CSS Scroller
The objective of this article is to build a cross browser CSS Scroller that degrades in older browsers.
Required HTML
The HTML required for building the scroller is, just a div with contents in it.
HTML Code:
<div id="Scroller">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus non turpis. Aenean ullamcorper dui ut velit. In sem orci, convallis id, mollis ac, pharetra et, leo. Integer nunc eros, rhoncus eu, lobortis at, facilisis consectetuer, nunc. Ut ut risus dapibus arcu porttitor imperdiet. Donec vehicula enim vel orci. Fusce porta egestas elit. Sed sollicitudin mauris in ante. Integer vitae lorem. Nam tincidunt.</p>
<p>Ut aliquet ipsum. Aenean dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sodales velit eu sem. Nam commodo commodo neque. Quisque gravida pharetra ante. Nulla consectetuer. Sed cursus adipiscing elit. Cras nibh nisl, tristique sed, tristique eget, commodo id, odio. Proin ultrices, elit eget scelerisque luctus, dui metus tristique est, non tincidunt velit risus id justo. Mauris egestas orci eleifend libero. Fusce pede. Cras sit amet tortor quis leo sollicitudin ultrices. Sed sem. Integer luctus, lacus eget dictum convallis, wisi tortor consequat mi, vel faucibus nulla pede in eros. Nunc dapibus aliquam enim. Integer est mauris, feugiat quis, scelerisque ut, ullamcorper sit amet, tortor.</p>
<p>Sed ultricies, magna ac euismod tincidunt, sem lectus consectetuer quam, a fermentum est tortor vitae felis. Sed sit amet libero. Curabitur non magna id erat aliquam faucibus. Vivamus dapibus. Nulla eu magna sit amet est placerat ullamcorper. Integer ac nisl eu odio ullamcorper ultrices. Suspendisse arcu nunc, posuere vitae, bibendum sit amet, accumsan at, nibh. Aliquam tristique dolor rutrum felis. In nulla. Maecenas nunc mi, molestie sit amet, consequat eu, aliquam sed, orci. Pellentesque varius. Donec ut erat nec quam volutpat ultricies. Proin non orci a dui dignissim faucibus. Donec faucibus tellus quis wisi. Phasellus dolor massa, blandit sit amet, mollis ac, sodales quis, diam. Donec risus odio, gravida et, pretium vitae, gravida id, turpis. Donec id libero vitae lorem tincidunt ultrices. Duis porta tincidunt erat. Suspendisse dapibus molestie tellus.</p>
</div>
The Required CSS
To position the above div you need to declare the following styles:
- top - the top position of the div in pixels or %
- left - the left position of the div in pixels or %
- width - the width of the div in pixels
- height - the height of the div in pixels
- overflow - to make it scroll
HTML Code:
#Scroller {
position:absolute;
left:100px;
top:50px;
width:250px;
height:150px;
overflow: auto;
background: #CCCCCC;
padding: 5px;
}
The background and padding were added to make it look a bit better. You could add required styles for font, border, etc.
Styling the Scrollbars
IE 5.5 and above allows you to style the scrollbars. However this is proprietary to IE and doesnot validate unless you put them within IE Conditional statements
HTML Code:
<!--[if IE]>
<style type="text/css">
#Scroller {
scrollbar-arrow-color:#333333;
scrollbar-track-color:#CCCCCC;
scrollbar-face-color:#CCCCCC;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
}
</style>
<![endif]-->
Note: Opera 7.5+ allows users to choose to see custom scrollbars. However this is not a default setting. If you feel the need to make your scrollbars appear colored in Opera 7.5+, you would have to remove the if/end if IE conditional statements at the cost of sacrificing validity of the CSS
|
