title: Example of mx or spark based scroller with scroll event handler
body: <p>I am working in a flex project where I need to put a scroller and add a event handler on the scrollevent.</p>
  <p>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!</p>
  <p>This is my code based on <strong>SPARK</strong> -</p>
  <pre><code>&lt;s:Scroller width=&quot;100%&quot; height=&quot;100%&quot; horizontalScrollPolicy=&quot;auto&quot; verticalScrollPolicy=&quot;auto&quot;&gt;
      &lt;s:Group id=&quot;myScroller&quot; horizontalScrollPosition=&quot;0&quot; verticalScrollPosition=&quot;0&quot;&gt;
          &lt;mx:Canvas width=&quot;1800&quot; height=&quot;970&quot;&gt;
              &lt;main:Main id=&quot;main&quot; width=&quot;100%&quot; height=&quot;100%&quot; userActivityManager=&quot;{userActivityManager}&quot;/&gt;
          &lt;/mx:Canvas&gt;
      &lt;/s:Group&gt;
  &lt;/s:Scroller&gt;
  </code></pre>
  <p>I am using the following <strong>SPARK</strong> based event handling code -</p>
  <pre><code>myScroller.addEventListener(Event.CHANGE, scrollarChange);
  private function scrollarChange(evt:Event):void {
      callLater(dgScroll);
  }
  
  private function dgScroll():void {
     trace(&quot;horizontalScrollPosition value=&quot;+myScroller.horizontalScrollPosition);
  }
  </code></pre>
  <p>But code is not entering this dgScroll() method.</p>
  <p>This <strong>SPARK</strong> 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.</p>
  <pre><code>private function myScroll():void {
                  trace(&quot;horizontalScrollPosition value=&quot;+myScroller.value);
  }
  
  &lt;s:VGroup&gt;
      &lt;s:HScrollBar id=&quot;myScroller&quot; width=&quot;100%&quot; height=&quot;100%&quot; change=&quot;myScroll()&quot;/&gt;
      &lt;s:VScrollBar width=&quot;100%&quot; height=&quot;100%&quot;/&gt;  
              &lt;mx:Canvas width=&quot;1800&quot; height=&quot;970&quot;&gt;
                  &lt;main:Main id=&quot;main&quot; width=&quot;100%&quot; height=&quot;100%&quot; userActivityManager=&quot;{userActivityManager}&quot;/&gt;
              &lt;/mx:Canvas&gt;
  &lt;/s:VGroup&gt;
  </code></pre>
  <p>This is an example of <strong>MX</strong> component based scrolling handler method -</p>
  <pre><code>myList.addEventListener(ScrollEvent.SCROLL, scrollHandler);
  
  function scrollHandler(e:ScrollEvent):void
  {
  //myList is scrolling
  }
  </code></pre>
  <p>But I am not getting any such MX based scroller example which I can fit into my code.</p>
  <p>Since SPARK scroller was serving my purpose so nicely, do you have any working example of <strong>SPARK based scrolling event handling</strong>? Will be really thankful.</p>