It seems like every UI design we are asked to implement these days has what I call "designer scroll bars" - skinny little tone on tone scroll bars that have no scroll arrows. While I'm not a big fan of these scroll bars for a number of reasons (not least of which is usability), they are still something we're required to do on a fairly common basis.
Luckily, in Flex 3 hiding the scroll arrows, and making the scrollbar thinner is a fairly simple task that you can accomplish globally with just a few lines of CSS.
ScrollBar {
up-arrow-skin: ClassReference(null);
down-arrow-skin: ClassReference(null);
trackSkin: Embed(source="skins/ScrollBarTrack.png", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
thumbUpSkin: Embed(source="skins/ScrollBarThumb_up.png", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
thumbOverSkin: Embed(source="skins/ScrollBarThumb_over.png", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
thumbDownSkin: Embed(source="skins/ScrollBarThumb_down.png", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
}
Using a null class reference as the skins for the arrow buttons effectively hides the arrows. In the above example I am using 6x20px PNGs for the thumb and track skins, and setting scaleGrid properties to preserve the rounded corners. The scroll bar will lay itself out based on the dimensions of the PNG graphics, making it 6px wide. You can see the result below.
The only issue I've discovered so far is that some lists (ex. DataGrid) will not redraw correctly according to the scrollbar width until the first time the user interacts with them. I'll try to post the solution to this in the next few days. You can see this issue in the picture below, where the cell renderers and headers are not sized appropriately.
Comments (10)
looks slick, just don't make them too small or the usability of your Flex app goes out the window! Fitz Law describes this quite nicely.
Posted by: Andre Charland at May 12, 2008 05:06 PMURL: http://blogs.nitobi.com/andre
Passing in null for the ClassReference works too (for hiding the arrows).
Posted by: John C. Bland II at May 12, 2008 08:20 PMURL: http://www.johncblandii.com
John,
You're right. That's even simpler. I will update the article to reflect that.
Posted by: Grant Skinner at May 12, 2008 08:43 PMURL: http://gskinner.com/blog/
Simply perfect! I used it right away in a chart annotation in order to be able to scroll the chart contents. Thx a lot!
Posted by: Tom Van den Eynde at May 13, 2008 01:46 AMURL: http://www.vdeprojects.com
Is there any way you could show the example application for this? and have the view source available?
very cool.
Posted by: Jonathan at May 14, 2008 01:26 PMURL: http://www.orangebeard.com
Nice and useful article!
Posted by: Vladimir Tsvetkov at May 20, 2008 10:24 AMI've just wrote a little addition to this post on my blog, about Designer ScrollBars and especially how to implement scroll thumb with a fixed size. View Source included!
Check it out on:
http://npacemo.com/wordpress/2008/05/20/flex-3-designer-scrollbar-fixed-size-scrollthumb/
URL: http://npacemo.com/
Okay as long as they allow for scrollwheel actions, otherwise I hate them as they define an annoyingly different user experience from the rest of the world.
Posted by: Frank at May 28, 2008 10:21 AMURL:
Hi.... nice tips..How to change the color of the Scrollbar(I have changed its skin) when I select a color from Standard ColorPicker
Note:
I know this will work if we didn't skin the Scrollbar
private function init():void {
vs.setScrollProperties(300,0,310,300);
vs.lineScrollSize = 300;
}
private function changed(event:ColorPickerEvent):void {
for(var i:int=0; i (vs.getChildAt(i)as UIComponent).setStyle('backgroundColor', cP.selectedColor);
}
}
]]>
But how to change its color If I skin the scrollbar.
Posted by: Ganga at September 1, 2008 06:35 AMURL:
Perfect,I think your's example that I needed.do you send it to me ,thanks
Posted by: Vincent at September 8, 2008 08:05 PMmy email: flysnail2008@hotmail.com
URL:
Thanks for posting this. It helped me a lot.
Posted by: JC Gueco at September 11, 2008 02:26 PMURL: http://www.jcgueco.com