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;
}

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

非常感谢你的时间。

解决方案 灵感来自Lunayah回答

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

Answer 1

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

Ex：.scroll-bar .filler {your color} 例如：.scroll-bar .corner {your color}

Answer 2

我知道这有点老了，但是我偶然发现这个寻找同样问题的解决方案，但是对于树视图中的角落，我尝试了上面没有运气。但是，我能够用这个选择器完成它。这可能对其他人有帮助。

.tree-view > .virtual-flow > .corner{
    -fx-background-color: transparent;
}