Custom Scroll Bar Using CSS

There are times when I fight and fight the interface in flex. This happens when you embed components within other components and those components are in other containers like HBox, VBox, Canvas, or any other container… Also say your using ViewStacks, and you throw that into the mix, and all the sudden you have a screen with for or 5 vertical or horizontal scroll bars in it.

Click Here to view the Example

Right click to view the source

I usually fiddle with the contraints and end up getting it to work out well enough for me so I don’t end up having scroll bars on my page unless it’s not viewed at full screen.

Most of the applications we make are geared toward internal high end corporate usage. There may be only be one department of a company working with the application we made, and then we make another totally different application for a different department. So it’s not like the screen has to be made to fit all of these different screen resolutions, and all the like. We can usually gear toward a standard 1024 x 768 resolution. But we try to make our applications resize with the browser to some extent.

In which case you use a lot of percentages and contraint based layout… and sometimes you simply can’t help but see some scroll bars… and usually after skinning and application the standard flex scroll bar tends to stand out in an application and makes it look not so “friendly on the eyes” as I like to say.

So here is a way to skin the scroll bar and make it look a little more friendly.

I would love to thank the Flex Show, and also the Flex 2 Style Explorer. That tool is a god send, and if you haven’t seen it, check it out here http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

Click Here to view the Example

Right click to view the source

10 comments on this post.
  1. takokumin:

    hi,my friend,
    i have in troubled when make a customer scrollbar use css.
    and glad to see your example,but the source link is invalidate.
    can you send the source copy to my email?
    my email address is .
    i’m sorry to trouble you and thank you very much.

  2. takokumin:

    up,
    my email address is
    [takokumin][at][hotmail.com]

  3. admin:

    I checked the link, and didn’t have a problem, but here they are again.

    Application:
    http://axel.cfwebtools.com/Examples/CustomScrollBar/bin/CustomScrollBar.html

    Source:
    http://axel.cfwebtools.com/Examples/CustomScrollBar/bin/srcview/index.html

  4. takokumin:

    It’s ok,thank you very much!

  5. cj:

    Hi, thanks for providing the link and some tips.

    Question though, after creating the css using flex, how do i integrate in html? Any links to the proper coding?

    Thanks!

  6. Custom Scrollbar Using CSS in Flex | Axelology | My Web Development Bookmarks:

    […] Visit link: Custom Scrollbar Using CSS in Flex | Axelology […]

  7. Mauricio:

    Thanks, you saved my day.

  8. prasad:

    thanks for the code. i used it in my flex application.
    thanks a lot!
    regards

  9. hasib:

    hi
    thanks for this post..
    nice & usefull…

  10. JeLBee:

    Is this works on different browsers?
    customixing the scrollbar seems cool.

Leave a comment