Question

不好意思，我正在尝试创建一个具有两个ScrollPanes的JavaFX应用程序。现在，我要一个圆角的，一个平的。我正在使用FXML创建场景和CSS样式。

我的CSS（到目前为止我所做的...）：

.scroll-bar:horizontal .thumb,
.scroll-bar:vertical .thumb {
    -fx-background-color : #dddddd;
    -fx-background-insets : 2.0, 0.0, 0.0;
    -fx-background-radius : 0em;
}

.scroll-bar:horizontal .thumb:hover,
.scroll-bar:vertical .thumb:hover {
    -fx-background-color : #9e9e9e;
    -fx-background-insets : 2.0, 0.0, 0.0;
    -fx-background-radius : 0em;
}

.scroll-bar:horizontal .thumb,
.scroll-bar:vertical .thumb {
    -fx-background-color : #dddddd;
    -fx-background-insets : 2.0, 0.0, 0.0;
    -fx-background-radius : 2em;
}

.scroll-bar:horizontal .thumb:hover,
.scroll-bar:vertical .thumb:hover {
    -fx-background-color : #9e9e9e;
    -fx-background-insets : 2.0, 0.0, 0.0;
    -fx-background-radius : 2em;
}

我知道（并确认）两个滚动条的拇指都将变圆，现在我正在将头发拔出（一对一）。我如何才能在同一CSS中制作两种不同的滚动条样式，并为FXML中的每个ScrollPane分配不同的样式？预先感谢。

Answer 1

您可以将CSS类应用于ScrollPane之一，然后为该类编写不同的CSS样式。

从FXML添加CSS类：

<ScrollPane styleClass="rounded-scroll-pane">

通过代码添加CSS类：

someScrollPane.getStyleClass().add("rounded-scroll-pane");

然后应用于CSS文件：

// General scroll style
.scroll-bar:horizontal .thumb,
.scroll-bar:vertical .thumb {
    -fx-background-color : #dddddd;
    -fx-background-insets : 2.0, 0.0, 0.0;
    -fx-background-radius : 0em;
}

.scroll-bar:horizontal .thumb:hover,
.scroll-bar:vertical .thumb:hover {
    -fx-background-color : #9e9e9e;
    -fx-background-insets : 2.0, 0.0, 0.0;
    -fx-background-radius : 0em;
}

// Custom ScrollPane style
.rounded-scroll-pane > .scroll-bar:horizontal .thumb,
.rounded-scroll-pane > .scroll-bar:vertical .thumb {
    -fx-background-color : #dddddd;
    -fx-background-insets : 2.0, 0.0, 0.0;
    -fx-background-radius : 2em;
}

.rounded-scroll-pane > .scroll-bar:horizontal .thumb:hover,
.rounded-scroll-pane > .scroll-bar:vertical .thumb:hover {
    -fx-background-color : #9e9e9e;
    -fx-background-insets : 2.0, 0.0, 0.0;
    -fx-background-radius : 2em;
}

JavaFX CSS应用于所有ScrollPanes

1 个答案: