JavaFX 滚动条自定义。当两个滚动条都被激活时，消除多余的正方形

Question

我创建下一个自定义滚动条，如下图所示

我使用了下一个 CSS

.text-area, .text-area .viewport, .text-area .content {
    -fx-background-color: transparent ;
}

.text-area .scroll-bar {
    -fx-background-color:transparent;
}

.text-area .scroll-bar:vertical {
    -fx-background-color:transparent;
}

.text-area .scroll-bar:horizontal {
    -fx-background-color:transparent;
}

.text-area .scroll-bar .thumb {
    -fx-background-color:derive(black, 50%);
}

.text-area .scroll-bar .thumb:hover {
    -fx-background-color:derive(black, 70%);
}

.text-area .increment-button:hover ,.text-area .decrement-button:hover {
    -fx-background-color:transparent;
}

.text-area .track  {
    -fx-background-color:transparent;
}

如何消除两个滚动条都被激活时出现的额外丑陋方 block ？

非常感谢您的宝贵时间。

解决方案灵感来自 Lunayah 答案

.text-area .scroll-pane .corner {    
    -fx-background-color: transparent ;
}

Answer 1

您看到的 2 个正方形的属性名称称为 .filler 和 .corner。您可以通过 css 为它们应用任何您想要的颜色，以使它们不可见。我不知道这些是否可以删除。

例如:.scroll-bar.filler{ 你的颜色}例如:.scroll-bar.corner{ 你的颜色}