gSkinner - Home

Designer ScrollBars in Flex 3

Posted on May 12, 2008 by Grant Skinner

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.

Follow @gskinner on Twitter for more news and views on interactive media.
24 Comments

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 on May 12, 2008 5:06pm URL: http://blogs.nitobi.com/andre

Passing in null for the ClassReference works too (for hiding the arrows).

Posted by: John C. Bland II on May 12, 2008 8:20pm URL: http://www.johncblandii.com

John,

You're right. That's even simpler. I will update the article to reflect that.

Posted by: Grant Skinner on May 12, 2008 8:43pm URL: 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 on May 13, 2008 1:46am URL: 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 on May 14, 2008 1:26pm URL: http://www.orangebeard.com

Nice and useful article!

I'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/

Posted by: Vladimir Tsvetkov on May 20, 2008 10:24am 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 on May 28, 2008 10:21am

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

But how to change its color If I skin the scrollbar.

Posted by: Ganga on Sep 1, 2008 6:35am

Perfect,I think your's example that I needed.do you send it to me ,thanks

my email: flysnail2008@hotmail.com

Posted by: Vincent on Sep 8, 2008 8:05pm

Thanks for posting this. It helped me a lot.

Posted by: JC Gueco on Sep 11, 2008 2:26pm URL: 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 on Jan 11, 2009 8:16pm

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 on Feb 6, 2009 4:52am URL: 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 on Mar 20, 2009 10:06am URL: http://www.pixelbox.net

Thanh you so much. Example is very useful to me.

Blesses.

Posted by: Dau Cuong on May 20, 2009 9:52pm

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 on Jul 30, 2009 8:55am

@dev:

Try setting the verticalScrollBarStyleName on your menu.

myMenu.setStyle("verticalScrollBarStyleName", "myScrollBar");

And put the appropriate declaration in your CSS.

.myScrollBar {

up-arrow-skin: ...;

etc...

}

Posted by: gduguay on Nov 18, 2009 6:37pm URL: http://www.acquisio.com

any fix for the gap on the left of the scrollbar?

Posted by: mike on Dec 2, 2009 2:47pm

Any idea how to make the thumb Not to scale as the content grows?

Posted by: Jason on Apr 19, 2010 3:32pm URL: http://wehavegoodideas.com

Thank you Randy for this very useful, time-saving tip and good industry blog!

Posted by: Jean-Pierre de Malignon on Jun 2, 2011 6:39pm URL: http://www.labaraka-media.com

Well I get this error using your exact code:



trascoding parameter 'scaleGridTop' is not supported by 'flex2.compiler.media.SkinTrascoder'

I'm using Flash Builder 4.1 and Flex SDK 3.5

:|

Posted by: andy on Jun 7, 2011 11:17am

is this valid for scroller in Flex 4?

Posted by: Tahir Alvi on Feb 28, 2012 3:29am URL: http://alvijee.blogspot.com

I apply this skin for HTML mx control that is working fine
here my css code for that

.htmlVScroll
{
up-arrow-skin: ClassReference(null);
down-arrow-skin: ClassReference(null);
trackSkin: Embed(source="skins/trackV.png" , scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
thumbSkin: Embed(source="skins/thumbV.png" , scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
}

But if i apply this code with little changes of style name for horizontal scroll. it did't work

any solution ?

Posted by: Tahir Alvi on Jun 11, 2013 8:23am URL: http://www.tahiralvi.com

Could you please provide the png images referenced in the code you have pasted above?

Thanks..

Posted by: vamsi on Jul 15, 2013 2:27pm

Is important that if you get the error

CSS type selectors are not supported in components: 'ColumnChart'

You need to change the "ScrollBar" global selector to a Class selector ".scrollBarStyle"
.scrollBarStyle
{
up-arrow-skin: ClassReference(null);
down-arrow-skin: ClassReference(null);
trackSkin: Embed(source="assets/ScrollBarTrack.png", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
thumbUpSkin: Embed(source="assets/ScrollBarThumb_up.png", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
thumbOverSkin: Embed(source="assets/ScrollBarThumb_over.png", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
thumbDownSkin: Embed(source="assets/ScrollBarThumb_down.png", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
}

Posted by: Mauricio Gracia on Feb 26, 2014 2:46pm URL: http://dguitar.sourceforge.net

Leave a Reply

Your email is never published nor shared.




You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>