Custom scrollbars

Question

Hey everyone,

I'm working on making an application with adobe air and I have a div that uses overflow-y. In order for the UI to look nice and sexy, what's the best way to replace the ugly default scrollbar with a creation of my own?

Thanks

EDIT: Everyone remember that this is on adobe air, not on a browser (I know better than to to mess with a scrollbar, that's way web -4.2)

Answer 1

Don't.

Users know how to to use the default platform UI widgets: they know what they look like, how they behave, etc. And the platform ones work really well.

They won't know how to use your widget. And even if you try and copy the platform one except for appearance, your widget will behave as a cheap knockoff; it will be missing features the user expects:

• Does your scroll thumb grow/shrink to show the length of the document, with a minimum size such that its always grab-able — but only on platforms where that is expected?
• Does middle-click scroll to the position clicked, left-click scroll down only, and right-click scroll up only, and each in proportion to where clicked on the scrollbar — on the platform where this is expected?
• Does clicking in the blank space between the thumb and up or down arrow work? Does it scroll by the amount the user is expecting, which varies by platform?
• Does scrolling go at the speed the user expects when the scroll buttons are held down?
• How is the user dragging the thumb handled when the mouse goes outside the scrollbar? Or middle-click, on the before-mentioned platform.
• Does your custom scroll bar follow the visual theme the user selected e.g., because he needs extra-high-contrast and/or extra-large widgets due to disability?

The answer to most of those is probably "no". At least, that's been my experience with web sites where the designer decided the platform scroll bars aren't cute enough.

Answer 2

Skin them, like you would any other flex component. To keep your code nice any clean you can specify the embed the skin files through a style in a css file.

Edit: A link on how to skin a scrollbar