{"id":125,"date":"2010-07-25T20:26:11","date_gmt":"2010-07-26T01:26:11","guid":{"rendered":"http:\/\/www.lonhosford.com\/lonblog\/?p=125"},"modified":"2015-07-31T18:25:51","modified_gmt":"2015-07-31T23:25:51","slug":"flex-4-hscrollbar-vscrollbar-how-to-autohide-like-scroller","status":"publish","type":"post","link":"https:\/\/www.lonhosford.com\/lonblog\/2010\/07\/25\/flex-4-hscrollbar-vscrollbar-how-to-autohide-like-scroller\/","title":{"rendered":"Flex 4 HScrollBar or VScrollBar: How to Autohide like Scroller"},"content":{"rendered":"<p><strong>By Lon Hosford<\/strong><\/p>\n<div style=\"float:right\">\n[ad name=&#8221;Google Adsense&#8221;]\n<\/div>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>A method to handle this is to use the contentWidth and contentHeight properties for a viewport such as the Group component.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n.\r\n.\r\n\/*\r\n\r\nAssume the viewport is a Group or like component with an id of viewportId.\r\nThis optionally sets the width to the viewport which may not be needed depending on layout..\r\n*\/\r\n&lt;s:HScrollBar  viewport=&quot;{viewportId}&quot;  width=&quot;{viewportId.width}&quot;  visible=&quot;{viewportId.contentWidth &gt; viewportId.width}&quot;   \/&gt;\r\n\r\n\/*\r\nAssume the viewport is a Group or like component with an id of viewportId.\r\nThis optionally sets the height to the viewport which may not be needed depending on layout.\r\n*\/\r\n&lt;s:VScrollBar  viewport=&quot;{viewportId}&quot;  height=&quot;{viewportId.width}&quot;  visible=&quot;{viewportId.contentHeight &gt; viewportId.height}&quot;   \/&gt;\r\n.\r\n.\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>By Lon Hosford [ad name=&#8221;Google Adsense&#8221;] 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[19,9],"class_list":["post-125","post","type-post","status-publish","format-standard","hentry","category-general","tag-actionscript","tag-flex"],"_links":{"self":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/comments?post=125"}],"version-history":[{"count":6,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/125\/revisions"}],"predecessor-version":[{"id":3706,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/125\/revisions\/3706"}],"wp:attachment":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/media?parent=125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/categories?post=125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/tags?post=125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}