buttonMode & mouseChildren & Scrollable content :: confused

Hi,
I’ve been working on simple Scroller and I’m getting stranges problems :look:

what I need is like this :: http://www.layoutgalaxy.com/html/htmnewletter49-page1.htm except its Vertical

OK,
this is my code:

 
package
{
 import flash.display.Sprite;
 
 import flash.text.TextField;
 import flash.text.TextFormat;
 import flash.text.TextFieldAutoSize
 
 import flash.events.MouseEvent;
 
 public class Content extends Sprite
 {
  private var label:TextField;
 
  public function Content()
  {
 
   var menu:Sprite = new Sprite();
 
   for (var i:uint = 1; i <= 15 ; i++)
   {
    var item:Sprite = new Sprite();
    var item_lbl:TextField = new TextField();
    item_lbl.text = &quot;item &quot; + i;
    item.buttonMode = true;
    item.mouseChildren = false; // !!
    item.addEventListener(MouseEvent.CLICK , clickHandler);
    item.addChild(item_lbl);
    item.y = i * (item_lbl.textHeight + 5)
    menu.addChild(item);
   }
            addChild(menu);
 
   menu.graphics.beginFill(0xFF9900);
   menu.graphics.drawRect(0,0,100,menu.height);
  }
 
  private function clickHandler(evt:MouseEvent)
  {
   trace( evt.target +" clicked");
  }
 }
}

package 
{
 import flash.display.Sprite;
 import flash.display.DisplayObjectContainer;
 
 import flash.events.Event;
 import flash.events.MouseEvent;
 
 
 
 public class Scroller extends Sprite
 {
  private var _content:DisplayObjectContainer;
  private var _mask:Sprite;
  private var _hitarea:Sprite;
 
  private var _scrollAmount:Number = 0;
  private var _scrollAcceleration:Number = .4;
  private var _scrollDirection:int = 1; 
  public function Scroller(content:DisplayObjectContainer,h:Number,w:Number)
  {
   _content = content;
 
   _mask  = createRect(h,w);
   _content.mask = _mask;
 
   _hitarea = createRect(h,w);
   _hitarea.alpha = 0;
 
   addChild(_hitarea);
   addChild(_content);
   addChild(_mask);
 
   addEventListener(MouseEvent.MOUSE_MOVE,checkScroll);
   addEventListener(MouseEvent.MOUSE_OUT,stopScroll);
  }
 
  public function get changableElements():Array
  {
   return [_mask,_hitarea];
  }
 
  private function createRect(h:Number,w:Number):Sprite
  {
   var sprite:Sprite = new Sprite();
   sprite.graphics.beginFill(0xFF0000);
   sprite.graphics.drawRect(0,0,h,w);
   return sprite;
  }
 
  private function checkScroll(evt:MouseEvent)
  {
   var correct:Boolean = false;
 
   if(mouseY > _mask.y  && mouseY - _mask.y < 30)
   {
    correct = true;
      _scrollDirection = 1;
   }
   else if(_mask.height > mouseY  && _mask.height - mouseY < 30)
   {
    correct = true;
       _scrollDirection = -1;
   }
   if(correct)
   {
    _scrollAmount = 0;
    addEventListener(Event.ENTER_FRAME, doScroll); 
   }
   //trace(correct)
  }
 
  private function stopScroll(evt:MouseEvent)
  {
   removeEventListener(Event.ENTER_FRAME, doScroll); 
   addEventListener(MouseEvent.MOUSE_MOVE,checkScroll);
  }
 
  private function doScroll(evt:Event)
  {
   var deff:Number = 0;
   if(_scrollDirection == 1)
   {
    if(_content.y + _scrollAmount * _scrollDirection > _mask.y)
    {
     _content.y =  _mask.y;
     stopScroll(null);
     return;
    }
    deff = mouseY - _mask.y;
    if(!(mouseY > _mask.y  && deff < 30))
    {
     stopScroll(null);
     return;
    }
   }
   else
   {
    if( _content.y  + _scrollAmount * _scrollDirection  < _mask.y - _content.height + _mask.height)
    {
     _content.y = _mask.y - _content.height + _mask.height;
     stopScroll(null);
     return;
    }
    deff = _mask.height - mouseY;
    if(!(_mask.height > mouseY  &&  deff < 30))
    {
     stopScroll(null);
     return;
    }
   }
   removeEventListener(MouseEvent.MOUSE_MOVE,checkScroll);
   _content.y   += _scrollAmount * _scrollDirection;
     _scrollAmount  += _scrollAcceleration; 
  }
 }
}

test :

 
addChild( new Scroller(new Content(),100,150) );

the problem is when the mouse goes on any item the scroller stop
the strange thing if I remove the item.mouseChildren = false; the scroller works great
but no hand pointer :look:

Any idea?

Thanks,