Skinning Scrollbars in Flex 3

Jun. 2, 2008 9 Comments Posted under: Random

Skinning in Flex 3 can be a bit of a nightmare as there is no code complete for CSS and it’s often very hard to find documentation.

I ran into a small problem when wanting to create an Apple esq scroll bar for a data grid, firstly you have to apply scale-9 skinning to the thumb (the bit you drag) so it doesn’t deform when the amount of data changes.

Then the main problem is that the Apple style arrows have kind of dock that the thumb slides into, which is a problem as Flex doesn’t seem to let the thumb overlap the arrows, or offer you any height and width control for them.

So to work around this I use scale 9 on the track and added the start of the button (the bit that docks) to the top and bottom, as the thumb can slide over the track, giving the effect it’s going into the button.

I expect that is rather confusing but take a look at the example…

View the Flex custom scroll bar skinning demo View source

This entry was posted on Monday, June 2nd, 2008 at 12:54 pm and is filed under Random. You can leave a comment and follow any responses to this entry through the RSS 2.0 feed.

9 Comments Leave a comment

  1. Ian Harrigan 8 September 2008 at 3:44 pm #

    Hi there, great work on the scroll bar skin – looks really good!

    I have a quick question that, hopfully, you’ll be able to help me with. Is it possible to change the width of the scrollbar? Lets say i wanted to have a large scrollbar in all controls (for a touch screen app lets say) then is that possible? Either through CSS, code, skins anything really…

    Any ideas?

    Thanks in advance,
    Ian Harrigan

  2. Rob 8 September 2008 at 3:56 pm #

    Hi Ian. I’m not too sure about that! You may be able to set the width, or use a larger image, or use an external scroller. Post back if you find a solution, I would love to know!

  3. Girish 23 September 2008 at 12:46 pm #

    Hi

    I ran into an prob with Vscrollbar, i want to dynamically change the color of the scrollbar(skin). i tried it using color transform but its not coming as expected..at the sametime iam applying the same to another canvas but its working fine..Any Ideas to solve it…
    Thanks..

  4. Rob 23 September 2008 at 12:52 pm #

    Hve you tried setting the background color property?

  5. Girish 25 September 2008 at 2:01 pm #

    hi

    I have given background color also then also no scope.Its not showing as expected. i am having an canvas and Vscroll bar when i change the theme color of the application the entire application it should change the color of the Scroll and canvas.Its working fine with canvas and vscroll it shows different color(light color). pls any ideas for the same…

  6. dilip 25 November 2008 at 6:30 am #

    some times scale 9 don’t work in specially when we use vertical design in trackSkin. Any one have any idea regarding on this?

  7. suyash 10 March 2009 at 9:35 am #

    Hi,
    Is there any way to find the length of the track and thumb.

  8. Rob 20 March 2009 at 5:11 pm #

    You can play around with the size of the thumb. Have a look at this example: http://npacemo.com/wordpress/2008/05/20/flex-3-designer-scrollbar-fixed-size-scrollthumb/

  9. Chris 20 August 2009 at 5:12 pm #

    Just wanted to give a word of thanks for posting this info – I was having some difficulty implementing a custom/curved scroller and this proved invaluable. much obliged.

Leave a Reply