I love Flex, but the default scrollbars are hideous. Sure, you can customize a couple of values in the CSS, the track and fill colors, etc. But those stupid arrow buttons are still there, sucking up the good vibes from the rest of your application.

So how do we get rid of them?

First, create a custom class that extends ProgrammaticSkin. Override the updateDisplayList() method in this class and leave it blank. Don’t even invoke the super.updateDisplayList() method!

Second, add a class reference to your CSS file for each of the up and down arrow skin properties.

Voilà! The arrow buttons are gone! 🙂

Update: I’ve posted sample code below.


Sample code for the custom skin:

package
{
     import mx.skins.ProgrammaticSkin;

     public class NoArrowSkin extends ProgrammaticSkin
     {
         override protected function updateDisplayList
             (w : Number, h : Number) : void
         {
         }
     }
}



Sample code for the custom styles:

ScrollBar
{
     upArrowDisabledSkin: ClassReference("NoArrowSkin");
     upArrowDownSkin: ClassReference("NoArrowSkin");
     upArrowOverSkin: ClassReference("NoArrowSkin");
     upArrowUpSkin: ClassReference("NoArrowSkin");

     downArrowDisabledSkin: ClassReference("NoArrowSkin");
     downArrowDownSkin: ClassReference("NoArrowSkin");
     downArrowOverSkin: ClassReference("NoArrowSkin");
     downArrowUpSkin: ClassReference("NoArrowSkin");
}