javafx表格默认的滚动条如下,有时候跟美工要求不是很搭,所以需要修改。
一番努力之后,把滚动条改成了如下样式,横向滚动条去掉了左右的按钮,纵向滚动条去掉了上下的按钮,滚动条的背景设为了透明。
样式代码如下:
/* 滚动条样式 ================================================ */
.scroll-bar:horizontal {
-fx-background-color: transparent;
-fx-border-width: 0;
}
.scroll-bar:vertical {
-fx-background-color: transparent;
-fx-border-width: 0;
}
.scroll-bar:horizontal .track, .scroll-bar:vertical .track
{
-fx-background-color: transparent;
-fx-border-color: transparent;
}
.scroll-bar:horizontal .increment-button, .scroll-bar:horizontal .decrement-button
{
-fx-background-color: transparent;
-fx-padding: 0 0 10 0;
}
.scroll-bar:vertical .increment-button, .scroll-bar:vertical .decrement-button
{
-fx-background-color: transparent;
-fx-padding: 0 10 0 0;
}
.scroll-bar .increment-arrow, .scroll-bar .decrement-arrow{
-fx-shape:"";
-fx-padding:0;
}
.scroll-bar:horizontal .thumb, .scroll-bar:vertical .thumb
{
-fx-background-color: rgb(0,0,0,0.5);
-fx-background-radius: 8em;
-fx-border-radius: 8em;
-fx-pref-height: 10px;
}
.scroll-pane .viewport {
-fx-background-color: transparent;
}
.scroll-pane {
-fx-background-color: transparent;
}
.scroll-pane .content {
-fx-padding:10px;
-fx-alignment: center;
-fx-background-color: transparent;
}
但是还有一个问题,滚动条相交叉的右下角没有透明,这就需要下面这个样式:
.scroll-pane .corner {
-fx-background-color: transparent;
}
最终效果如下:
完,鞠躬!