如何通過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滾動條的拇指厚度？

回答

相關問題