JavaFx的ScrollPane的面板以及滾動條的css的自定義化

設置滾動條的樣式 ：

.scroll-bar:vertical .track{
    -fx-background-color:transparent;
    -fx-border-color:transparent;
    -fx-background-radius: 0em;
    -fx-border-radius:2em;
}

.scroll-bar:vertical .increment-button,
.scroll-bar:vertical .decrement-button{
    -fx-background-color:transparent;
    -fx-background-radius: 0em;
    -fx-padding:0 0 10 0;
}

.scroll-bar:vertical .increment-arrow,
.scroll-bar:vertical .decrement-arrow{
    -fx-shape: " ";
    -fx-padding:0;
}

.scroll-bar:vertical .thumb{
    -fx-background-color:derive(black,90%);
    -fx-background-insets: 2, 0, 0;
    -fx-background-radius: 2em;
}

.scroll-bar:vertical:hover .track,
.scroll-bar:vertical:pressed .track{
    -fx-background-color: derive(#434343,20%);
    -fx-opacity: 0.2;
    -fx-background-radius: 0em;
}

.scroll-bar:vertical .thumb:hover,
.scroll-bar:vertical .thumb:pressed{
    -fx-background-color: derive(black,50%);
}

.scroll-bar:vertical .increment-button:hover ,
.scroll-bar:vertical .decrement-button:hover{
    -fx-background-color:derive(gray,100%);
    -fx-border-color:derive(gray,80%);
    -fx-padding:10px;
}

設置面板的樣式：

#scrollPane .viewport{
    -fx-background-color: red;
}

#scrollPane{
    -fx-background-color: red;
    -fx-padding: 0;
}

設置橫向滾動條不顯示：

#scrollPane{
    -fx-padding: 0;
    -fx-hbar-policy : never;
}