The ScrollBar class provides the capabilities to create scrollable panes and views in your application. A simple first step is to implement the following control.

import javafx.scene.control.ScrollBar;

ScrollBar {
    min: 0
    max: 100
    value: 50
}

The min and max instance variables define the minimum and maximum values represented by the scrollbar. The value instance variable defines the current value represented by the scrollbar. By default the scrollbar is oriented horizontally. However, you can set the vertical orientation by using the vertical instance variable.

Take a moment to learn how a scrollbar works. The three areas of a scrollbar are the thumb, the right/left or down/up buttons, and the track.

When a user moves the thumb, the value variable changes. In the code fragment shown, the value equals 50. So when the application starts, the thumb is located in the center of the scrollbar. The user can click a left or right button (down or up button for the vertical orientation) to scroll by a unit increment. The unitIncrement instance variable corresponds to the amount by which the scrollbar is adjusted when a button is clicked. Another option is clicking within the track by a block increment. The blockIncrement instance variable defines the amount by which to adjust the scrollbar when the track of the bar is clicked.

Take a look at the scrollbar in action. The following application implements a scrollable scene to view the images.

Take a closer look at the source code of the application.

package scrollbarsample;

import javafx.scene.Scene;
import javafx.scene.control.ScrollBar;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.scene.paint.Color;
import javafx.scene.effect.DropShadow;
import javafx.scene.layout.LayoutInfo;

def images = for (i in [1..5]) Image { url: "{__DIR__}fw{i}.jpg" };
var box: VBox;
var bar: ScrollBar;

Stage {
    title: "ScrollBar demo"
    scene: Scene {
        fill: Color.BLACK
        width: 180
        height: 180
        content: [
            box = VBox {
                spacing: 10
                layoutX: 5
                layoutY: bind -bar.value
                content: for (image in images) ImageView {
                    image: image
                    effect: DropShadow { 
                        offsetX: 2 offsetY: 2
                        color: Color.LIGHTGREY 
                    }
                }
            }
            bar = ScrollBar {
                value: 0
                min: 0
                max: bind box.height - bar.height
                vertical: true
                layoutInfo: LayoutInfo { height: bind bar.scene.height }
                layoutX: bind bar.scene.width - bar.width
            }
        ]
    }
}

A vertical box with images and a scrollbar are added to the scene. The task of this application is to view the content of VBox, which is longer than the scene's height. The maximum value of the scrollbar is bound to the difference of the box's height and scene's height.

max: bind box.height - bar.scene.height

The layoutY variable of the VBox is bound to the value of the scrollbar. So each time the thumb is moved, or either a button or the track is clicked, the box moves.

layoutY: bind -bar.value

This application is one of the typical usages of the ScrollBar class. You can also customize this class to create a scroll area within a scene. You can find the complete list of the ScrollBar instance variables and functions in the API documentation.

You can also change the look of the scrollbar to adjust it to the look of the graphical content in your application. For more information, see Applying CSS to UI Controls.

Note that this application is a manual approach to scrolling your graphical content. A more simple approach in many cases might be to use the ScrollView class.

Related Documents

• API Specification: ScrollBar

Samples That Use Scrollbars

• Project Management System
• Style Editor