JavaFX ScrollPane背景问题：如何设置透明或自定义背景（仿Telegram）

ScrollPane的背景由自身容器和内部viewport两部分组成，只设置ScrollPane的style无法完全覆盖默认白色背景，同时还要确保消息列表容器（messageList）的背景是透明的，才能让BorderPane的背景透出来。以下是具体解决方案：

方案1：让ScrollPane完全透明（显示BorderPane背景） #

修正代码中的颜色值错误，并添加viewport的透明设置：

ScrollPane scrollPane = new ScrollPane(messageList);

// 确保消息列表容器背景透明
messageList.setStyle("-fx-background-color: transparent;");

// 设置ScrollPane自身为透明，去掉边框
scrollPane.setStyle("""
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-border-radius: 0;
    -fx-background-radius: 0;
""");

// 等skin加载完成后，获取viewport节点并设置透明
scrollPane.skinProperty().addListener((obs, oldSkin, newSkin) -> {
    Node viewport = scrollPane.lookup(".viewport");
    if (viewport != null) {
        viewport.setStyle("-fx-background-color: transparent;");
    }
});

// 保留原有配置
scrollPane.setFitToWidth(true);
scrollPane.setFitToHeight(true);

StackPane centerPane = new StackPane();
centerPane.getChildren().add(scrollPane);
centerPane.getChildren().add(infoBox);

方案2：设置自定义背景颜色 #

如果需要替换为指定颜色（比如Telegram的浅灰色）：

ScrollPane scrollPane = new ScrollPane(messageList);

// 消息列表容器匹配背景色
messageList.setStyle("-fx-background-color: #f0f2f5;");

// 设置ScrollPane自身背景色
scrollPane.setStyle("""
    -fx-background-color: #f0f2f5;
    -fx-border-color: transparent;
""");

// viewport同步设置相同颜色
scrollPane.skinProperty().addListener((obs, oldSkin, newSkin) -> {
    Node viewport = scrollPane.lookup(".viewport");
    if (viewport != null) {
        viewport.setStyle("-fx-background-color: #f0f2f5;");
    }
});

// 保留原有配置
scrollPane.setFitToWidth(true);
scrollPane.setFitToHeight(true);

StackPane centerPane = new StackPane();
centerPane.getChildren().add(scrollPane);
centerPane.getChildren().add(infoBox);

方案3：设置背景图片 #

如果要使用自定义背景图：

ScrollPane scrollPane = new ScrollPane(messageList);

// 消息列表容器设为透明，让背景图透出来
messageList.setStyle("-fx-background-color: transparent;");

// 设置ScrollPane的背景图
scrollPane.setStyle("""
    -fx-background-image: url('your/background/image/path.png');
    -fx-background-size: cover;
    -fx-background-repeat: no-repeat;
    -fx-border-color: transparent;
""");

// viewport同步设置背景图
scrollPane.skinProperty().addListener((obs, oldSkin, newSkin) -> {
    Node viewport = scrollPane.lookup(".viewport");
    if (viewport != null) {
        viewport.setStyle("""
            -fx-background-image: url('your/background/image/path.png');
            -fx-background-size: cover;
            -fx-background-repeat: no-repeat;
        """);
    }
});

// 保留原有配置
scrollPane.setFitToWidth(true);
scrollPane.setFitToHeight(true);

StackPane centerPane = new StackPane();
centerPane.getChildren().add(scrollPane);
centerPane.getChildren().add(infoBox);

关键说明 #

• 你之前代码中的#00000是无效的十六进制颜色值，正确格式应为6位（如#000000）或使用transparent关键字。
• ScrollPane的viewport是独立子节点，默认背景为白色，必须在skin加载完成后通过lookup获取并设置样式。
• 消息列表容器（messageList）的默认背景会遮挡底层背景，必须同步设置为透明或匹配的颜色/图片。

内容的提问来源于stack exchange，提问作者lol