Thursday, February 05, 2009

Scroll behavior in flex

Most of the sites we build are using textarea's to display multiple lines of text. However all scroll functionality is handled internally by the TextArea component (or more exact the underlying TextField). Which means if you have a page that scrolls and you have a TextArea component somewhere, the scrollwheel won't work if you have your mouse directly above the text in the TextArea.

Fortunately you can disable this behavoir by extending the TextArea component and adding the following lines of code (i added a Boolean property to enable/disable this new behavior):

override protected function createChildren():void {
super.createChildren();
if( disableInternalScrolling ) {
removeEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);
textField.mouseWheelEnabled = false;
}
}
Another issue we encountered was that scrolling on a mac simply doesn't work at all.

Ali Rantakari has created a good working fix for this issue using javascript to pass on the scroll properties: http://hasseg.org/blog/?p=138

1 comments:

judah said...

thanks for the code example. i posted a bug on this issue on the adobe bugbase. i think it is being worked on.

btw i also ported a class for mouse wheel support for flex projects. you can read about it here http://www.judahfrangipane.com/blog/?p=237. i'm not sure how it compares to Ali's class.

Post a Comment