Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Author: Jan Rojcek

1. Introduction

This document is the user experience specification for the JavaFX Scroll View control.

...

A Scroll View control permits the user view content that is bigger than the scroll view itself. The content inside Scroll View can be any other control or a set of controls like list, tree, table, text, picture, formatted text, etc. The user controls which part of content is visible through Scroll View by scrolling it vertically or horizontally. 

Figure 1 Various appearances of Scroll View

Scroll View IntroImage RemovedImage Added

3. Desktop

Scroll View on desktop platform contains vertical and horizontal scroll bars that appear automatically when content size is bigger than the available scroll view size. Each scroll bar contains scroll arrows, scroll channel and scroll slider.

Figure 2 Scroll view components

Scroll View IntroductionImage RemovedImage Added

3.1 Detailed Behaviors

...

Figure 3 Hidden horizontal or vertical scroll bar

Hidden scroll barsImage RemovedImage Added


Scroll view can also work in a mode when content width or height is fixed to the available width or height of scroll view. This is typically used for textual documents or lists when bidirectional scrolling is undesirable.

...

Figure 4 Content fits the scroll view width

Fit WidthImage RemovedImage Added

In Fit Height mode, horizontal list’s (or any other content’s) height is fixed to the available height of scroll view. Horizontal scroll bar appears as needed.

Figure 5 Content fits the scroll view height

Image AddedImage Removed
Common

Scroll wheel or any other pointer device's direct scroll gestures work with scroll view when the pointer is above scroll view.

...

Figure 6 Scroll View components on Touch platform

Image Removed 


4.1 Detailed Behaviors

Scroll bars

...

Figure 7 Dragging and "over-scrolling" the scroll view border

Image RemovedImage Added

Swipe gesture invokes accelerated scrolling with initial speed defined by the intensity of swipe gesture. The content scrolls in the swipe direction with the scrolling speed continuously decreasing after it has been released by swipe gesture until the content stops scrolling. When the content has been released and it reaches the border of the scroll view, it stops scrolling. The user can also stop the scrolling content with point gesture targeted into any part of content.

...

Figure 8 Swiping and "over-scrolling" the scroll view border

Image RemovedImage Added

Note that Touch devices can rotate. Because of this, sizes of ScrollView should adjust automatically based on the available mode (Landscape or Portrait).

...

Figure 9 Scroll View components on 2D Traversal platform

Image RemovedImage Added

5.1 Detailed Behaviors

...