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 (17)
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
i tried it but couldn't hide the up/down arrows.
ScrollBar{
up-arrow-skin: ClassReference(null);
down-arrow-skin: ClassReference(null);
}
i am using flex. 3.0.1 what sdk are you using?
Posted by: noj at January 11, 2009 08:16 PMURL:
Do you ever get to the bottom of the problem with the width not redrawing correctly? Could really do with that fix right now ;)
Posted by: Ollie Kavanagh at February 6, 2009 04:52 AMURL: http://www.olliekav.com
I know it's dirty but you can replace the up and down arrow skins with a transparent 1x1px gif. It works 100% of the time.
Would be better to use a null reference if you could make it work properly though.
Posted by: Rob McMichael at March 20, 2009 10:06 AMURL: http://www.pixelbox.net
Thanh you so much. Example is very useful to me.
Posted by: Dau Cuong at May 20, 2009 09:52 PMBlesses.
URL:
the scroll bar style is applied on all or none. how can i apply style on menu selectively. i tried styleName but it does not works
Posted by: dev at July 30, 2009 08:55 AMURL:
@dev:
Try setting the verticalScrollBarStyleName on your menu.
myMenu.setStyle("verticalScrollBarStyleName", "myScrollBar");
And put the appropriate declaration in your CSS.
.myScrollBar {
Posted by: gduguay at November 18, 2009 06:37 PMup-arrow-skin: ...;
etc...
}
URL: http://www.acquisio.com
any fix for the gap on the left of the scrollbar?
Posted by: mike at December 2, 2009 02:47 PMURL: