Flex: Making Scrollbars Follow Focus
If you’ve ever created a form tall enough to require a vertical scroll bar in Flex, you may have not even have noticed that you have you scroll down manually when focus moves below the visible part of a window. Users, however, notice, especially if they don’t have a scroll wheel on their mouse.
There doesn’t seem to be any built-in or easy way to correct this, so I wrote a helper class to facilitate. I called it “com.webapper.autoscroll.AutoScroll”, and it has one static function “autoScroll(event)” that should be called anytime a given container changes focus (focusIn) or finishes resizing (updateComplete).
To use it, simply add the following to the scrolling container (Canvas, Panel, etc) that contains the input fields you want to chase focus on:
focusIn="AutoScroll.autoScroll(event);"
The autoScroll() method determines the y position of the current focus relative to the top of the container, and repositions its vertical scroll bar to ensure that the item with focus is completely visible, if necessary.
Source, library SWC, and demo are at:
http://www.darylb.net/flexautoscroll/
mate, thankyou for this.
I’ve been bitten with this also. at least I have a fighting chance next time.
Comment by barry.b — February 3, 2008 @ 12:00 am
Thanks for this. I tried it out with Flex 3 and it works apart from when I try to scroll back up using the vertical scroll bar – my application flashes and refuses to let me scroll up. Could this be because my scrolling container is the <mx:Application> root element itself, or perhaps an incompatibility with Flex 3?
Comment by Heather — February 11, 2008 @ 12:00 am
If you scroll up, but a field still has focus, then it will return the scroll position to the field that has focus.
In that respect, it may work a little /too/ well.
You can disable that by removing the event handler on updateComplete, so that autoscroll only moves the scroll bar when focus actually changes.
Comment by Daryl Banttari — February 18, 2008 @ 12:00 am
Thanks man!
Comment by Olrix — February 19, 2008 @ 12:00 am
Thank you a lot!
Regards from Brazil
Comment by Ved — June 3, 2008 @ 12:00 am
your autoscroll class doesent scroll automaticly, even in your example. So what exactly is that for? (-.-)
Comment by newchild — August 20, 2008 @ 12:00 am
Still works fine for me. As I tab from field to field, the scrollbar adjusts to ensure the field with focus is in view.
What were you expecting?
Comment by Daryl Banttari — August 21, 2008 @ 12:00 am
Thanks Daryl, It really works fine, it matches exactly as per my requirement.
Comment by Kishore kumar Unnikrishnan — October 24, 2008 @ 12:00 am
works great, thanks for making it
Comment by Brian — November 25, 2008 @ 12:00 am
it’s close. but unfortunately it doesn’t allow me to scroll back to the top. I can move the scrollbar to the top, but the display area doesn’t change, so it looks like I’m at the top when I’m really not.
Comment by radley — January 2, 2009 @ 12:00 am
Thanks, works graet on Flex3 as you said without the updateComplete.
Comment by Avishay — January 8, 2009 @ 12:00 am
Great post. Thanks.
@radley — I fixed the scrolling-up issue you were having:
http://techishdotjeremy.blogspot.com/2009/05/autoscrolling-flex-form.html
Comment by jeremy mooer — May 18, 2009 @ 5:03 pm
Hi!
Thanks this code.
Comment by Zsagia — June 14, 2009 @ 4:45 am
Thanks! It works really fine!
I was looking for something similar but instead of using tab key, use Page-Up and Page-Down key, it’s seems to be a little more complicated, isn’t it?
Comment by any — October 29, 2009 @ 4:17 pm
Very nice… modicifed it for spark scroller component – code below…
public class AutoScroll
{
// this method is specifically written for the Scroller component
// to use this on other scroller components will need modification or
// another method
public static function autoScroll(event:FocusEvent):void
{
var scroller : Scroller = event.currentTarget as Scroller;
var focusItem : DisplayObject = DisplayObject(scroller.focusManager.getFocus());
// if no scrollbar or focused item, nothing to do
if(scroller.verticalScrollBar && focusItem)
{
// is the current focus item inside our container?
if( focusItem == scroller || !scroller.contains(focusItem) )
{
return;
}
// find the focusItem’s y coord in the scrolled container
// by summing the y offsets of the item and all parent containers in the tree
// between the target and the scrolled container
var focusTopEdge : int = focusItem.y;
var thisItem : DisplayObjectContainer = focusItem.parent;
while(thisItem != scroller)
{
focusTopEdge += thisItem.y;
thisItem = thisItem.parent;
}
var focusBottomEdge : int = focusTopEdge + focusItem.height;
var scrollbarRange : int = scroller.verticalScrollBar.maxHeight;
var visibleWindowHeight : int = scroller.height;
var lastVisibleY:int = visibleWindowHeight + scroller.viewport.verticalScrollPosition;
if(scroller.horizontalScrollBar)
{
// remove the horiz scrollbar height from lastVisibleY
lastVisibleY -= scroller.horizontalScrollBar.height;
}
if( focusTopEdge == scroller.viewport.verticalScrollPosition )
{
//trace( “Bar not moved, already at top edge of focus item.” );
}
else if( focusTopEdge 0 )
{
var newPos : int = Math.min(scrollbarRange, scroller.viewport.verticalScrollPosition + (focusBottomEdge-lastVisibleY));
scroller.viewport.verticalScrollPosition = newPos;
//trace( “Moved bar down to ” + newPos );
}
else
{
//trace( “Bar not moved.” );;
}
}
}
}
Comment by Andrew — April 26, 2011 @ 2:35 am
[...] Original Script stammt von webapper und ist samt Beispiel hier (http://www.webapper.com/blog/index.php/2008/02/01/flex-making-scrollbars-follow-focus/) zum [...]
Pingback by Container AutoScroll bei Focus | michiweber — July 22, 2011 @ 8:47 am