A quick way to know the source of scroll bar?

Whenever I use a lot of nesting inside mxml components(including many states) with quite a few Vboxs and Other containers, I always get confused when I see a scrollbar appearing on screen, especially with datagrid inside it(I always want to show scroll bar in datagrid and not on the parent container, for which I usually set the height and width of datagrid smaller than its paren开发者_如何学编程t container at run time).

My question is, how could I possibly know (QUICKLY), using debugger, that which component is the source of scroll bar that I see on screen (if there are more than one, then some propoerty of compnent must change when I scroll it up or down).

Thanks.

I realise that this answer isn't using the debugger directly. I mean it as an idea for a simple tool really.

I had a quick go at putting together a simple app that's function is to report what display object is dispatching a mouse wheel event. It does not matter to the app if there is a scrollbar or not, but I guess you could adjust it to your needs. Its a quick start really, here's the code...

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600"
                creationComplete="init()">
    <mx:HBox id="HBoxWithScrollbar" width="600" height="500">
        <mx:HBox width="800" height="800">
        </mx:HBox>
    </mx:HBox>
    <mx:TextArea id="record" height="300" width="600"/>
    <mx:Script>
        <![CDATA[
            private function init():void{
                record.text = 'Scroll Record\n';
                this.addEventListener(MouseEvent.MOUSE_WHEEL, recordObject);
                for each (var obj:DisplayObject in this.getChildren()){
                    obj.addEventListener(MouseEvent.MOUSE_WHEEL, recordObject);
                }
            }

            protected function recordObject(event:MouseEvent):void{
                record.text += (event.target as DisplayObject).toString() + '\n';
            }

        ]]>
    </mx:Script>
</mx:Application>

The important thing here really is to see that you can pick up the mouse wheel event at the top level, because it bubbles by default, and isn't cancelable.

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/InteractiveObject.html#event:mouseWheel

Once you've got hold of that event, you've got options.

This was built using version 3.6 of the Flex SDK, but it wouldn't take much to build a 4.x version. I am simply displaying "toString()" value of the target display object, but that could be any attribute you want. You'll probably want to put in some error handling for the loop adding events, and also in the event handler. As I said, its just a start, and I hope it helps.