Customizing scrollbars in Flex is something that I see requested all the time, and it's actually really easy to do. I see requests for things like getting rid of the buttons, or making the scroll bar less intrusive to the UI. In this post, we'll walk through some simple css style changes to customize scrollbar appearance.

In the examples in this post, I'll just show a mx:List that gets populated by random data (GUIDs/UUIDs, created by UUIDUtil). All of the changes to the scrollbars are applied using CSS styles. In these cases, the styles would be applied globally within the application, to all scrollbar instance.

The first example has the up and down arrows removed, and has a custom track, which gives it a very different appearance:

The first thing that I mentioned was to remove the up and down arrows. This can be easily applied by changing the "up-arrow-skin" and "down-arrow-skin" attributes of the Scrollbar CSS declaration. To get rid of the arrow buttons completely, you can just set these to undefined using a ClassReference entry.

up-arrow-skin: ClassReference("undefined");
down-arrow-skin: ClassReference("undefined");

Another thing that can go a long way in changing the appearance of a scrollbar is changing the track skin. In the example above, I changed the scrollbar track to be a thin bar which is semi-transparent, so that the thumb appears to site over top of it, rather than appearing to be contained within the track, as "normal" scrollbars do.

To achieve this effect, the track skin was set using the "track-skin" property of the Scrollbar CSS style declaration, as shown below

track-skin: Embed(source='assets/track.png',
   scaleGridLeft="2", scaleGridTop="6", 
   scaleGridRight="7", scaleGridBottom="9");

It is right above this text, in case you missed it.

Below, you will find the full source code to this example. You can see that the bulk of the code is actually the creationComplete event handler, which populates the data provider ArrayCollection. The scrollbar customization is the "simple" part.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="absolute" 
  creationComplete="onCreationComplete()" viewSourceURL="srcview/index.html">
  
  <mx:Style>
    ScrollBar 
    {
       track-skin: Embed(source='assets/track.png',
               scaleGridLeft="2", scaleGridTop="6", 
               scaleGridRight="7", scaleGridBottom="9");
       up-arrow-skin: ClassReference("undefined");
       down-arrow-skin: ClassReference("undefined");
     }
    
  </mx:Style>
  
  <mx:Script>
    <![CDATA[
      import mx.utils.UIDUtil;
      import mx.collections.ArrayCollection;
      
      [Bindable]
      private var ac : ArrayCollection;
      
      private function onCreationComplete() : void
      {
         ac = new ArrayCollection();
         
         for (var i:int = 0; i < 25; i ++)
         {
            ac.addItem( UIDUtil.createUID() );
          }
       }
    ]]>
  </mx:Script>
  
  <mx:List width="100%" height="100%"
    dataProvider="{ ac }" />
  
</mx:Application>

The next example will show how to take the scrollbar customization a step further, and intriduces custom thumbs. In this example, the scroll thumb is a small, plain rectangle that matches the size of the visible track area.

The only difference between this example and the previous one is that images have been specified as the slider thumbs, using the "thumb-up-skin", "thumb-over-skin", and "thumb-down-skin" style properties.

thumb-up-skin: Embed(source='assets/thumb_up.png',
   scaleGridLeft="3", scaleGridTop="3", 
   scaleGridRight="10", scaleGridBottom="11");
thumb-over-skin: Embed(source='assets/thumb_over.png',
   scaleGridLeft="3", scaleGridTop="3", 
   scaleGridRight="10", scaleGridBottom="11");
thumb-down-skin: Embed(source='assets/thumb_down.png',
   scaleGridLeft="3", scaleGridTop="3", 
   scaleGridRight="10", scaleGridBottom="11");;

Similar to the track skin, the thumb skins are embedded with a scale9 grid, to prevent them from distorting when stretched or resized. Below you can see the individual images that are used to create the scroll thumb.

Up:

Over:

Down:

Next, you can see the full source code for the second example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="absolute" 
  creationComplete="onCreationComplete()" viewSourceURL="srcview/index.html">
  
  <mx:Style>
    ScrollBar 
    {
       track-skin: Embed(source='assets/track.png',
               scaleGridLeft="2", scaleGridTop="6", 
               scaleGridRight="7", scaleGridBottom="9");
       up-arrow-skin: ClassReference("undefined");
       down-arrow-skin: ClassReference("undefined");
       thumb-up-skin: Embed(source='assets/thumb_up.png',
               scaleGridLeft="3", scaleGridTop="3", 
               scaleGridRight="10", scaleGridBottom="11");
       thumb-over-skin: Embed(source='assets/thumb_over.png',
               scaleGridLeft="3", scaleGridTop="3", 
               scaleGridRight="10", scaleGridBottom="11");
       thumb-down-skin: Embed(source='assets/thumb_down.png',
               scaleGridLeft="3", scaleGridTop="3", 
               scaleGridRight="10", scaleGridBottom="11");
     }
    
  </mx:Style>
  
  <mx:Script>
    <![CDATA[
      import mx.utils.UIDUtil;
      import mx.collections.ArrayCollection;
      
      [Bindable]
      private var ac : ArrayCollection;
      
      private function onCreationComplete() : void
      {
         ac = new ArrayCollection();
         
         for (var i:int = 0; i < 25; i ++)
         {
            ac.addItem( UIDUtil.createUID() );
          }
       }
    ]]>
  </mx:Script>
  
  <mx:List width="100%" height="100%"
    dataProvider="{ ac }" />
  
</mx:Application>

As you can see, customizing applicaion scrollbars isn't difficult, and can go a long way in customizing the appearance and interaction of your application. You can download the full application source code at:

http://www.tricedesigns.com/portfolio/scrollbars/srcview/index.html

Read more from Andrew Trice.