Scroll Pane

Scroll Pane

• JFXScrollBar
• Styling Scroll Bars

JFXScrollBar

The JFXScrollBar is a material design compliant implementation of a scroll bar.

DEMO:

Styling Scroll Bars

To give any scroll pane the material design look you can use something like the following CSS.

Add it to a style sheet, and add the style sheet to your application either programmatically or in FXML

/*******************************************************************************
 *                                                                             *
 * Scroll Bar			                                                       *
 *                                                                             *
 ******************************************************************************/

.scroll-bar:vertical > .track-background, .scroll-bar:horizontal > .track-background {
    -fx-background-color: #F1F1F1;
    -fx-background-insets: 0.0;
}

.scroll-bar:vertical > .thumb, .scroll-bar:horizontal > .thumb {
    -fx-background-color: #BCBCBC;
    -fx-background-insets: 0.0;
    -fx-background-radius: 1.0;
}

.scroll-bar:vertical > .increment-button, .scroll-bar:vertical > .decrement-button {
    -fx-padding: 5 2 5 2;
}

.scroll-bar:horizontal > .increment-button, .scroll-bar:horizontal > .decrement-button {
    -fx-padding: 2 5 2 5;
}

.scroll-bar > .increment-button, .scroll-bar > .decrement-button, .scroll-bar:hover > .increment-button, .scroll-bar:hover > .decrement-button {
    -fx-background-color: transparent;
}

.scroll-bar > .increment-button > .increment-arrow, .scroll-bar > .decrement-button > .decrement-arrow {
    -fx-background-color: rgb(150.0, 150.0, 150.0);
}

.scroll-bar:vertical > .increment-button > .increment-arrow {
    -fx-shape: "M298 426h428l-214 214z";
}

.scroll-bar:vertical > .decrement-button > .decrement-arrow {
    -fx-shape: "M298 598l214-214 214 214h-428z";
}

.scroll-bar:horizontal > .increment-button > .increment-arrow {
    -fx-shape: "M0 428l0 -428l214 214l-214 214z";
}

.scroll-bar:horizontal > .decrement-button > .decrement-arrow {
    -fx-shape: "M214 0l0 428l-214 -214l214 -214z";
}

/*******************************************************************************
 *                                                                             *
 * Scroll Pane			                                                       *
 *                                                                             *
 ******************************************************************************/

.scroll-pane {
    -fx-background-insets: 0;
    -fx-padding: 0;
}

.scroll-pane:focused {
    -fx-background-insets: 0;
}

.scroll-pane .corner {
    -fx-background-insets: 0;
}