[SOLVED] Example of mx or spark based scroller with scroll event handler

Example of mx or spark based scroller with scroll event handler

I am working in a flex project where I need to put a scroller and add a event handler on the scrollevent.

Now the problem is that I am not able to get any suitable example to accomplish this. Either I am getting spark based scroller example, but no corresponding event handling example OR I am getting mx component based event handling example, but no corresponding scroller example!

This is my code based on SPARK -

<s:Scroller width="100%" height="100%" horizontalScrollPolicy="auto" verticalScrollPolicy="auto">
    <s:Group id="myScroller" horizontalScrollPosition="0" verticalScrollPosition="0">
        <mx:Canvas width="1800" height="970">
            <main:Main id="main" width="100%" height="100%" userActivityManager="{userActivityManager}"/>
        </mx:Canvas>
    </s:Group>
</s:Scroller>

I am using the following SPARK based event handling code -

myScroller.addEventListener(Event.CHANGE, scrollarChange);
private function scrollarChange(evt:Event):void {
    callLater(dgScroll);
}

private function dgScroll():void {
   trace("horizontalScrollPosition value="+myScroller.horizontalScrollPosition);
}

But code is not entering this dgScroll() method.

This SPARK based code is working, but the scrollbar is coming on the top of the frame rather than on the bottom. Also the VScrollBar is not actually covering the whole screen, it's just located in the top.

private function myScroll():void {
                trace("horizontalScrollPosition value="+myScroller.value);
}

<s:VGroup>
    <s:HScrollBar id="myScroller" width="100%" height="100%" change="myScroll()"/>
    <s:VScrollBar width="100%" height="100%"/>  
            <mx:Canvas width="1800" height="970">
                <main:Main id="main" width="100%" height="100%" userActivityManager="{userActivityManager}"/>
            </mx:Canvas>
</s:VGroup>

This is an example of MX component based scrolling handler method -

myList.addEventListener(ScrollEvent.SCROLL, scrollHandler);

function scrollHandler(e:ScrollEvent):void
{
//myList is scrolling
}

But I am not getting any such MX based scroller example which I can fit into my code.

Since SPARK scroller was serving my purpose so nicely, do you have any working example of SPARK based scrolling event handling? Will be really thankful.

Solution

The best way to handle the scrolling event is through scrolling events or mouse events. If I want to move any other element on the screen as the scroller scrolls, then the movement will be smooth with the scrolling events or mouse events. Here is the code -

import flash.events.MouseEvent;

private function onScrollarChange(event:MouseEvent):void {
    //Handle the event, for e.g. move other component accordingly
}

<s:Scroller id="myScroller" width="100%" height="100%" horizontalScrollPolicy="auto" verticalScrollPolicy="auto" mouseMove="onScrollarChange(event)">
    <s:Group id="myScrollerGroup" horizontalScrollPosition="0" verticalScrollPosition="0">
    <mx:Canvas width="1800" height="970">
        <main:Main id="main" width="100%" height="100%" userActivityManager="{userActivityManager}"/>
    </mx:Canvas>
    </s:Group>
</s:Scroller>

Thanks