如何修改或移除JavaFX ScrollPane滚动条背景色

要实现ScrollPane滚动条背景与容器无缝衔接（透明或同色），需同时针对滚动条的多个组件设置样式，单一样式无法覆盖所有默认背景区域：

完整生效的CSS代码 #

/* 垂直滚动条轨道 */
.scroll-bar:vertical .track {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
}

/* 垂直滚动条自身背景（覆盖轨道周围的浅灰色区域） */
.scroll-bar:vertical {
    -fx-background-color: transparent;
}

/* 自定义滚动条滑块样式（替换为你需要的颜色） */
.scroll-bar:vertical .thumb {
    -fx-background-color: #666666;
    -fx-background-radius: 1em;
}

/* 隐藏滚动条箭头按钮（可选，若不需要箭头） */
.scroll-bar:vertical .increment-button,
.scroll-bar:vertical .decrement-button {
    -fx-background-color: transparent;
    -fx-background-radius: 0;
}

/* 确保ScrollPane视口背景与容器一致 */
.scroll-pane .viewport {
    -fx-background-color: transparent;
}

为什么之前的代码效果不全？ #

• 仅设置.scroll-bar:vertical .track无法覆盖滚动条组件自身的默认背景，所以仍会看到浅灰色区域；
• .track-background只能修改轨道背景的一部分，无法处理滚动条整体的背景区域。

验证效果 #

按你的复现步骤：用白色背景的AnchorPane作为ScrollPane容器，设置自定义滑块颜色后，应用上述CSS即可实现滚动条背景完全透明，与容器无缝衔接，适配任意背景色。

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