<div class="scroll_container">
<div class="scroll_content">
<h2>CSS Scrollbar Style</h2>
Many designers dislike the way scrollbars look in browsers, and wish there was a way to make them look at least somewhat more appealing, possibly even blending in with the rest of the web page.<br /><br />
Some browsers support different ways to customize colors, none of which (to my knwledge) are W3C compliant. Also none of them seem to work in Firefox at all, which is another downside for many of us.<br />
There's also an option to use JS or jQuery scripts for completely custom scrollbars, many of which have problems when it comes to dynamic content and sometimes even images loading within those scrolling containers.<br /><br />
I'm just a novice enthusiast myself, so the following example may very well be even worse than some of the methods mentioned above. It's also a bit messy to begin with, but it doesn't use any scripting, it's done using css standard styles, and not too difficult to understand.<br />
Basically, all I do is mask part of the existing browser scrollbar, to hide up and down buttons, left and right edges, and round up the top and bottom track for a little extra visual effect. You can do without those and keep them square instead.<br /><br />
To achieve this effect, you need 2 containers. The outer container, set to desired dimensions to fit into your web page layout. This container includes the inner container (with content) as well as masking divs.<br />
The inner container is where you put all of the content. This one is pushed up, over the edge of outer container, far enough to hide the up button (top:-17px), and its height is greater than that of outer container, so the bottom button goes out of the frame as well. After that you need to adjust padding so the actual content doesn't go out of frame as well.<br />
Last thing to do is properly position the masking divs to hide the undesired parts of the browser scrollbar.<br /><br />
To visually check what actually happens, move to CSS part of the screen and change border colors from 'solid #000000' to 'solid #FF0000' for example for classes <i>.left_right_mask</i>, <i>.corner_top_mask</i> and <i>.corner_bottom_mask</i>.<br /><br />
<a href="http://www.digital-madness.com/index-en.php" target="_blank">http://www.digital-madness.com</a>
<br /><br /><br />
</div>
</div>
<div class="top_bottom_mask" style="left:413px; top:10px;">
<div class="corner_top_mask"></div>
</div>
<div class="left_right_mask" style="left:413px; top:11px; height:418px;"></div>
<div class="left_right_mask" style="left:428px; top:10px; height:418px;"></div>
<div class="top_bottom_mask" style="left:413px; top:420px;">
<div class="corner_bottom_mask"></div>
</div>
<div style="position:absolute; top:10px; left:450px;">
Browser support:
<ul>
<li>Google Chrome</li>
<li>Firefox</li>
<li>Safari</li>
<li>Opera</li>
</ul>
From the technical point of view, this also works in IE. the only problem are those grotesque up and down buttons, which are twice as big as any other browser uses. Not the most pleasing quality of that browser to be honest.
</div>
.scroll_container {
background-color:#000000;
width:421px;
height:420px;
color:#999999;
border:2px solid #000000;
border-radius:10px;
overflow:hidden;
text-align:justify;
}
.scroll_content {
position:relative;
width:400px;
height:414px;
top:-17px;
padding:20px 10px 20px 10px;
overflow-y:auto;
}
a {
color:#C800C8;
font-size:1.2em;
float:right;
}
.top_bottom_mask {
position:absolute;
overflow:hidden;
width:17px;
height:10px;
}
.left_right_mask {
position:absolute;
width:0px;
border:1px solid #000000;
}
.corner_top_mask, .corner_bottom_mask {
position:relative;
left:-2px;
border:6px solid #000000;
height:20px;
width:13px;
border-radius:16px;
}
.corner_top_mask {
top:-3px;
left:-4px;
}
.corner_bottom_mask {
top:-18px;
left:-4px;
}