Reusable Toolbar, Menubar, Component Scroller Control

Instead of using the CSS property "overflow" to show scrollbars, did you ever want to put scroll arrows on your Bindows toolbars? How about your menu bars? Or, how about your tabs? I did.

I love CSS, but sometimes, horizontal scrollbars are pretty ugly especially if all you want to do is scroll a toolbar. Scrollbars are great for scrolling the browser window to see all of the content, but it's pretty much overkill for a single component.

Inspired by the toolbar scrollers found in the browsers, I created a reusable component called ScrollableComponent.

Use it with a BiComponent and you'll get this in Firefox --


and this in IE --


The component works for all derivatives of BiComponent and you can easily instantiate, set its size and then add it to the containing component like this --

var scrollableComponent = new ScrollableComponent(container);
scrollableComponent.setSize(container.getWidth(), container.getHeight());
win.add(scrollableComponent);

Note that the scroll arrows only show up when the width of the component is longer than the width of the browser and when you mouseover the component. It's less intrusive that way, but if you want I'll leave that up to you to change that (maybe have it show up when you're resizing the window, etc.).

Feel free to modify and use it.

Get the ScrollableComponent here and the left and right scroll arrows here and here. See the implementation here. Review the test driver here.

Have fun!