JavaFX滚动面板的边框和背景

Question

我遇到了有关ScrollPane默认背景和边框的一些问题。 使用这个样式能够更清楚地看到问题。

setStyle("-fx-background-color:blue; -fx-border-color:crimson;");

我尝试了这种样式，但没有成功，只有红色边框消失了，留下了蓝色边框。

setStyle("-fx-background-color:blue; -fx-background-insets:0; -fx-border-color:crimson; -fx-border-width:0; -fx-border-insets:0;");

我查看了这篇旧文章JavaFX隐藏ScrollPane灰色边框和 http://docs.oracle.com/javafx/2/ui_controls/editor.htm

这行代码也不起作用

scrollPane.getStyleClass().add("noborder-scroll-pane");

感谢

- Nuntipat Narkthong

---

在JavaFX 8中，使用新的默认主题时，ScrollPane背景颜色可能很难设置。对于这些情况，请参见https://dev59.com/rWAg5IYBdhLWcg3w_fHV。 - Jon Onstott

Answer 1

在JavaFX 8的当前版本中，您可以使用边缘到边缘的样式类完全移除边框：

<ScrollPane styleClass="edge-to-edge"/>

- Mike Hearn

---

非常好的发现。虽然这不在JavaFX CSS参考文档中记录，但它是JavaFX 8默认的modena.css样式表的一部分。 - jewelsea

Answer 2

我已经找到了一个解决方案，想在这里发布它，以便其他人不必再浪费时间去寻找。

通过查看JavaFx的默认css（caspian.css）的代码，该文件已经通过以下命令从库中提取出来。

jar xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css

我能看到我错过的那个人是

-fx-padding: 0;

所以这是我正在使用的CSS类。

.scroll-pane {
    -fx-background-insets: 0;
    -fx-padding: 0;
}

.scroll-pane:focused {
    -fx-background-insets: 0;
}

.scroll-pane .corner {
    -fx-background-insets: 0;
}

- Nuntipat Narkthong

---

尝试使用“-fx-background-color: transparent”但是“border”仍然让我感到烦恼，所以我找到了您的答案。谢谢您先生！ :) - xadun

Answer 3

首先尝试使用这个

.scroll-pane > .viewport {
   -fx-background-color: transparent;
}

设置背景颜色之前

- Howard J

---

尽管得票较高的解决方案对我无效，但这个确实有效！ - gbmhunter

Answer 4

似乎有一个简单的解决方案，那就是使用"-fx-background: rgb(80,80,80);"，即：

scrollPane.setStyle("-fx-background: rgb(80,80,80);");

至少对我来说，这个方法完美地解决了问题，而在JavaFX 8中，"-fx-background-color: rgb(80,80,80);"或者"-fx-control-inner-background: rgb(80,80,80);"则不起作用。在早期版本的JavaFX中，"-fx-background-color: rgb(80,80,80);"是有效的。

- user3477760

Answer 5

您可以使用：

-fx-background-color: transparent;
-fx-control-inner-background: transparent;

如果你只设置-fx-background-color，你会发现颜色变化只应用于ScrollPane的内边缘，而中心区域的颜色仍未改变。 -fx-control-inner-background属性将改变该中心区域的颜色。

- RestInPeace

Answer 6

老实说，你的问题不够清楚，但我提供这个答案只是为了帮助其他人。导致这个问题的原因是你有一个ScrollPane，在它里面有一个称为viewport的东西，它被绑定在ScrollPane上。你为ScrollPane对象应用的属性并不适用于viewport。如果你想要同时应用这些属性到两者，而不包括子元素，则必须使用stylesheet属性，而不是style本身，后者使用内联CSS代码。例如，如果你想要让ScrollPane透明，你必须同时应用到两者上，假设文件名为"scrollPane.css"，如下所示：

#mainScrollPane > .viewport {
    -fx-background-color: transparent;
}

#mainScrollPane {
    -fx-background-color: transparent;
}

然而，您需要为ScrollPane对象应用特殊的Id属性，以便它不适用于子元素：

  ScrollPane scrollPane = new ScrollPane(root);
  scrollPane.setId("mainScrollPane");
  scrollPane.getStyleSheets().add("scrollPane.css");

- Hasan Shadi

---

我可以确认这个代码可以使用透明颜色，而其他答案只能设置不透明的颜色，因为它们正在改变“ScrollPane”的样式。 - vovahost

Answer 7

与其使用FXML或CSS，我更喜欢消耗事件，但这仅适用于具有内容的部分。如果您的scrollPane大于其内容，则还必须填充剩余空间。

scrollPane.getContent().setOnMousePressed(Event::consume);
scrollPane.setFitToHeight(true);
scrollPane.setFitToWidth(true);

- Jack J