Categories
Articles

Flex 4 HScrollBar or VScrollBar: How to Autohide like Scroller

By Lon Hosford

[ad name=”Google Adsense”]

There are skinning situations you want to simply use the HScrollBar or VScrollBar to handle the scrolling. For example using multiple Scroller components to handle overlapping viewports. That scenario might include a horizontal scroll bar for a TextArea but a vertical scroll bar for the container.

One drawback is that HScrollBar and VScrollBar do not autohide the scroll bars until they are needed for scrolling. The Scroller component does autohide. If the Scroller cannot handle the need such as overlapping viewports, then resorting to HScrollBar and VScrollBar with or without the Scroller may be a possible solution.

A method to handle this is to use the contentWidth and contentHeight properties for a viewport such as the Group component.

.
.
/*

Assume the viewport is a Group or like component with an id of viewportId.
This optionally sets the width to the viewport which may not be needed depending on layout..
*/
<s:HScrollBar  viewport="{viewportId}"  width="{viewportId.width}"  visible="{viewportId.contentWidth > viewportId.width}"   />

/*
Assume the viewport is a Group or like component with an id of viewportId.
This optionally sets the height to the viewport which may not be needed depending on layout.
*/
<s:VScrollBar  viewport="{viewportId}"  height="{viewportId.width}"  visible="{viewportId.contentHeight > viewportId.height}"   />
.
.