How to get scrollbars inside background image in Container

Unlike a List based component, in which scrollbars always appear _inside_ a background image provided you have one, in a mx:Container subclassed component, such as a Canvas, the scrollbars always go _outside_ of your background image.

So say if the Canvas has a width of 200 px, the background image has a width of 200 px when there is no scrollbar. If the scrollbar is 16 pixels wide, the background image would become 200 – 16 = 184 px, as opposed to staying 200px wide. Sort of reminisentant of the DOM box model in IE vs. that in Firebox?

Solution? use nested containers. Say one called “innerBox” and the other “outerBox”:

For “outerBox”, you have full scaled background image and scroll policy to “off“;

For “innerBox”, you have background image set to null and scroll policy to “on“, plus, set both percentage width and percentage height to 100%. You may also want to setbackgroundAttachment to “fixed“;

See the sample CSS below:

.outerbox
{
background-image: Embed(source=”img/gradientPaneBkg.png”,
scaleGridTop=”7″, scaleGridBottom=”96″,
scaleGridLeft=”7″, scaleGridRight=”148″);
background-size: “100%”;
}
.innerbox
{
background-image: null;
vertical-scroll-bar-style-name: “myScrollBarStyle”;
}
.myScrollBarStyle
{
thumbSkin: Embed(source=”assets/scrollThumb_r.png”,
scaleGridLeft=”5″, scaleGridTop=”6″,
scaleGridRight=”7″, scaleGridBottom=”46″);
trackSkin: Embed(source=”assets/null_17_18.png”,
scaleGridLeft=”4″, scaleGridTop=”4″, scaleGridRight=”10″, scaleGridBottom=”170″);
upArrowSkin: Embed(source=”assets/null_17_18.png”);
downArrowSkin: Embed(source=”assets/null_17_18.png”);
}

Now here is the catch: since we have switched off the scrollbar on our component, each time you are are dealing with scrolling, you probably meant to deal with the innerBox’s scrolling. Like so:

override public function set verticalScrollPosition(value:Number):void
{
innerBox.verticalScrollPosition = value;
}
override public function get verticalScrollPosition():Number
{
return innerBox.verticalScrollPosition;
}

Advertisements

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: