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

我尝试在方向为水平时将厚度设置为-fx-pref-height: 10px;，当滚动条方向为垂直时，我尝试将其设置为-fx-pref-width: 10px;。但是不行。如何通过CSS自定义javafx滚动条的拇指厚度？

.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来实现这一点？

来源

2017-05-14 Vanguard

可以设置滚动条的填充收缩拇指的厚度。

.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; 
}

来源

2017-12-19 07:04:22 Pakbert

逻辑。为什么是16.5？ – Vanguard

你可以测试你喜欢的任何值。我编辑了我的答案并添加了@anlar的答案。箭头大小与字体大小绑定。 – Pakbert

滚动条的宽度被配置成经由它的字体大小，例如：

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

来源

2017-05-14 19:42:33 anlar

不幸的是，它不起作用。 – Vanguard

你确定css实际应用于你的场景吗？我试图创建一个简单的项目，该风格正在影响所有滚动条，如上图所示。 – anlar

是的，我将CSS应用到现场。但没有工作。 – Vanguard

由下面的CSS设置在滚动条的箭头的填充。

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

来源

2017-05-15 08:35:51

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

回答

相关问题