Flex: scroll without scrollbars

This is just a simple trick.
I had this breadcrumbs component made of a ‘LinkBar’, sometimes it gotten so long that a horizontal scrollbar was needed.
But when this horizontal scroll bar appeared he obscured the links (crumbs) underneath it.

So here comes the “scroll without scrollbars”.

Add some items so a scrollbar is needed, you’ll see the scroll buttons appear.
Click them to scroll. The mouse wheel also scrolls.
Remove items to see when the scroll buttons no longer needed.

It is very simple.
(of course a more ‘sophisticated’ solution can be done).

Demo is here (right click for source)
Source is here

Advertisements

7 Responses to Flex: scroll without scrollbars

  1. Seems neat. One UI problem is that you have no idea of how many items are in the list. May I suggest you shorten the item titles when there are too many items and expand to show the full name on rollover
    |11…|22…|33…|44…| and then when rolling over 3:
    |11|22|33333333|44|

  2. shemesh says:

    Julian,
    Ye.. i hear you, it is a usability problem.
    i wouldn’t suggest to truncate the labels as it will drive the scroll-buttons mad making them disappear/re-appear to much; plus: usability thinking… truncating breadcrumbs is not very convenient to the user.

    i would suggest to disable the scroll-button once we reach the end, and enable when a scroll is possible.

  3. Finder works like this when you do a search. I was trying to remember where I saw it.

  4. Nadav Parag says:

    I would suggest adding another button on each side that scrolls to the end or beginning of the list. something like ||.
    Maybe also <> that will scroll faster (page by page).

  5. Ryan Hilton says:

    Hello Awesome Scroller!,

    I am developing a photoviewer application for my company, and this is exactly how I need to be able to scroll through the photos, the only problem is, after a certain number of photo’s appear, the right scroll arrow disappears!

    It gets pushed after the photos fill in the HBox! And then you can’t see it!

    How can I make it stick? so that the images that come in, don’t push it away?

  6. shemesh says:

    Hi Ryan,
    its hard to tell without seeing the code.
    are you sure your layout is correct? all your components at their correct place?

  7. Andrew says:

    Thanks for the nice script.

    What about adding some effect to it so it doesn’t stop on a dime. Like a nice ease out on the move. Any suggestions on how to do this?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: