View Full Version : Customize Scrollbar

Apr 10th, 2007, 10:24 PM
I have done a Google search on the internet. All customized scrollbars are related to change the colors and arrows.

I have to alter the shape of those two little squares on the top end and the bottom end of the scrollbar.

What should I do? Do I have to come up with "customized images" for them? How do I put customized images in HTML scrollbar?

Apr 10th, 2007, 11:18 PM
As far as I know, I don't think it is possible to put images in place of the arrows on a scrollbar.

Apr 10th, 2007, 11:21 PM
You can only customize the scrollbar colors in Internet Explorer (MSDN (http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarColor.htm)). You can’t use images in place of the scrollbars or parts of the scrollbars. You can create fake scrollbars that allow more visual customization via JavaScript or Flash, although with decreased functionality; for example, the mouse wheel and keyboard will probably become useless for scrolling purposes and the scrollbar will probably fail altogether if the user does not have scripts enabled or the proper plugins installed.

Apr 10th, 2007, 11:48 PM
Yeah, I had to do that once on this website (http://anianzollner.de/html/person/person.htm) (right side) and I hated it (and I’m not very proud of it either - got it from blueshoes.org (http://www.blueshoes.org/en/javascript/slider/)). That is a typical design by someone who had no clue about website design and I had to find a way to customize the scrollbar… and the more I tried and looked for a solution the more I came across websites that advised against this practice (and the whole “custom scrollbar” thing as people expect a scrollbar that is recognizable as such, not just a small stripe).

And also I didn’t find any solution that would work in strict standards compliant websites using unobstrusive JavaScript (http://onlinetools.org/articles/unobtrusivejavascript/index.html). And since my JS knowledge is very basic yet I couldn’t just create something from scratch that would work.
The least thing I could do to maintain at least some accessibility is to make it so people without JS would see the regular scrollbar.

I can just say: don’t mess with the scrollbar. That is causing more problems than helping you. If you want a really good website then design it so that regular scrollbars would look acceptable there (to remind you: scrollbars on Mac look completely different and you can never know which browser/settings a user might have.