Flex: scroll without scrollbars
April 3, 2008 7 Comments
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
Shemesh Spots 
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|
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.
Finder works like this when you do a search. I was trying to remember where I saw it.
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).
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?
Hi Ryan,
its hard to tell without seeing the code.
are you sure your layout is correct? all your components at their correct place?
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?