Question

I’m having a problem with mouse wheel scrolling of a VBox. When the mouse if over any of the components in the VBox or the vertical scrollbar it works fine, but no scrolling occurs when the mouse is over the background of the VBox.

<mx:VBox width="100%" height="150">
   <s:Label text="A large label." height="100" />
   <s:Label text="A label." />
   <s:Label text="A label." />
   <s:Label text="A label." />
   <s:Label text="A label." />
   <s:Label text="A large label." height="100" />
   <s:Label text="A label." />
   <s:Label text="A label." />
   <s:Label text="A label." />
   <s:Label text="A label." />
</mx:VBox>

I looked at the code for VBox and Container (which VBox inherits.) Container adds a MouseEvent.MOUSE_WHEEL listener to itself when a vertical scroll bar exists. I put a breakpoint in this function but it’s only called when my mouse is over a subcomponent.

As a last ditch effort I tried setting mouseEnabled, focusEnabled and a few other random properties but none of those helped.

Does anyone know how to make a VBox act correctly and scroll when my mouse is anywhere over it? Thanks in advance.

(Switching to a spark Scroller is not an option at the moment due to unwanted snapping behavior.)

Answer 1

Your problem–you may have guessed- is that the MouseEvents aren’t firing. I suspect is the same issue with that exists with FocusEvents. Containers do not dispatch these events on their own; they only get events bubbled up from their children; which do accept mouse and focus events.

As one workaround, you may try adding a transparent Image as the first child to your component. The background will still show through, but the image should pick up the relevant events and bubble them up to the container.