Scroll Pane

Scroll Pane

• JFXScrollPane
• Styling Scroll Bars
• Smooth Scrolling

JFXScrollPane

The JFXScrollPane is a material design compliant implementation of a scroll pane.

DEMO:

Styling Scroll Bars

To give any scroll pane those fancy looking scroll bars (that match the 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;
}

/* Up- and Down-Button Padding */
.scroll-bar:vertical > .increment-button, .scroll-bar:vertical > .decrement-button {
    -fx-padding: 5 2 5 2;
}

/* Left- and Right-Button Padding */
.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);
}

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

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

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

/* Left Arrow */
.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;
}

Smooth Scrolling

There is a smooth scrolling utility method that can apply smooth scrolling to any scroll pane JFX or otherwise:

JFXScrollPane.smoothScrolling(anyScrollPane);