Flex 3: scrolling of list items with in a list via scroll wheel

Question

Here is a snip from within my code:

<mx:Panel id="recPanel" title="I have the following helpful recommendations for you:"
verticalScrollPolicy="off" width="100%" height="180">
<mx:List dataProvider="{recommendations}" wordWrap="true" variableRowHeight="true"
    verticalScrollPolicy="auto" width="100%" height="100%" />
</mx:Panel>

The 'recommendations' dataProvider is an ArrayCollection of String, which are generally sentences about as long as this one. By setting the variableRowHeight and wordWrap properties as shown, if a sentence is too long to fit on a single line, everything works fine- the row expands and the messages show on two lines, or occasionally three.

The space allocated for this panel within the entire canvas means if the total text size of 'recommendations' exceeds six lines, I need for the entire list scroll. This is also working just fine. The trouble is when using the mouse wheel to do the scrolling- Flex scrolls both the entire list and the single item where the mouse is hovering. Often this results in only the second half of a sentence being visible. Non-programmer friends I have asked to look at this noticed this, and tell me it as a problem. If a user does not notice the dual scrolling, and sees only a fragment of a sentence, it will be perceived as an error in the application.

I have tried putting in an itemRenderer, both drop-in and as a component. If the renderer has veritcalScrollPolicy off, it solved the scrolling within an item, but meant that the list as a whole would not scroll with the wheel, only by using the scroll bars.

I would prefer to find a best-of-both worlds solution: allow mouse wheel of the list, but prevent scrolling of individual items within it. Any ideas welcome.

Answer 1

I would try using your item renderers with the scroll policy off, then add event listeners to your list for the scroll wheel up and down, and set the vertical scroll position += 10 on wheel up and -=10 on wheel down (play with the numbers to see what looks right.

I'd give you better code example but my copy of flex builder expired today and I'm waiting on IT to get me my license.