Skip to main content

Experimenting with scroll panes and scroll bars - incorporating your feedback

Posted by kirillcool on November 7, 2006 at 7:55 PM PST

The previous entry showed the first experimental support for translucent scrollbars that show the viewport contents on the scrollbar area (buttons and track). The readers have left very interesting ideas in the comments section (thanks everybody), and here is the new implementation.

First, the WebStart link itself. The bottom slider controls the opacity of the scroll bar in inactive (non-rollover) state, while the top slider controls the opacity of the scroll bar in active (rollover) state.

Here's the list of things that were changed (besides the obvious support for different rollover opacity):

  • The scroll thumb is translucent as well.
  • The scroll bar can be marked with "active" property. This makes the scroll buttons appear always in active color scheme (as in the link above).
  • The thumb becomes "active" when the mouse is over any area of the scroll track (not only the thumb area).
  • The performance is much better, making the viewport appear much less "torn" under the scrollbars.

The transitions between inactive and active states are fully animated (note that there is no assumption on the composites for these two states being both SRC_OVER. There are still the following points (feel free to add yours in the comments):

  • Should the track be painted in "active" composite in rollover state (as the thumb does)? See th first screenshot below - the mouse is over the horizontal scroll track, but it appears as opaque as the vertical scroll track. Thanks to alski for the suggestion.
  • Should i provide an API to allow mouse-proximity based composites? This may not work very well when the mouse comes from the bottom or from the right... Thanks to for the suggestion.

One thing that is not yet implemented (will be) - proper animation of the scroll button "ears". This is especially noticeable on standard button shaper. And now for some screenshots. Scroll pane with 50% inactive and 80% active opacity on scroll bars (the mouse is over the horizontal scroll track):

Scroll pane with 50% inactive and 80% active opacity on scroll bars (the mouse is not over any track):

Scroll pane with 30% inactive and 60% active opacity on scroll bars (the mouse is over the horizontal scroll track):

The code for the test application (and the supporting UI delegates) is not yet in CVS (it will be added once 3.1 is officially out and properly tagged). To see the code, download the distribution zip from this location and see the src/test/ScrollDemo.java.

Related Topics >>