如何通过css自定义javafx滚动条拇指厚度？

Question

我尝试在方向水平时按-fx-pref-height: 10px;设置厚度，在滚动条方向垂直时按-fx-pref-width: 10px;设置厚度。但是没有用。

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

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

如何通过自定义css来实现这一目标？

Answer 1

你可以设置滚动条的填充以缩小拇指＆＃39;厚度

.scroll-bar:vertical {
    -fx-pref-width: 16.5;
    -fx-padding: 3;
}

.scroll-bar:horizontal {
    -fx-pref-height: 16.5;
    -fx-padding: 3;
}

.scroll-bar, .scroll-bar:pressed, .scroll-bar:focused {
    -fx-font-size: 15;
}

Answer 2

通过以下css在滚动条的箭头中设置填充。

.scroll-bar .decrement-arrow {
    -fx-padding:2.25;
 }
.scroll-bar .increment-arrow {
    -fx-padding:2.25;
}

Answer 3

滚动条宽度是通过它的字体大小配置的，例如：

.scroll-bar {
    -fx-font-size: 100px;
}