In several places in our application we have Text components that dynamically resize depending on their content. An annoying thing about these Text components is that they start scrolling when the user uses the mouse wheel while hovering the components. I have been trying to disable this scrolling for a while but all of the proposed solutions* that I have found have not worked.
It was only today when I broadened my search criteria to target the Flash community rather than limit the search to Flex that I finally found a solution:
http://www.eddieoneverything.com/articles/disabling-textarea-scrolling-in-flash-as3.php
Based on the solution proposed in this link I created a new text component for Flex that does not allow the user to scroll the content.
Here is the code. Feel free to re-use it in any way you deem fit.
package com.flexceptional.components
{
import flash.events.Event;
import flash.text.TextFieldAutoSize;
import mx.controls.Text;
import mx.events.FlexEvent;
public class TextNoScroll extends Text
{
override protected function createChildren():void
{
super.createChildren();
// To get rid of unwanted scrolling. Needs to
// be done any time the component is resized
// or the content changes.
addEventListener(FlexEvent.UPDATE_COMPLETE,
updateCompleteHandler);
}
private function updateCompleteHandler(event:Event):void
{
textField.autoSize = TextFieldAutoSize.LEFT;
var tempHeight:Number = textField.height;
textField.autoSize = TextFieldAutoSize.NONE;
textField.height = tempHeight + 20; // Padding 20px
}
}
}
* Proposed solutions that did not work:
- Setting mouseWheelEnabled=false on the internal textfield
- Stopping propagation of any mouse wheel events on the text component or the internal text field
- Setting mouseEnabled = false on the Text component. Well, this actually does disable the scrolling but it also disables any other mouse action, like selecting text or clicking links.
