JavaFX滚动条自定义。当两个滚动条都被激活时，消除多余的方形 [英] JavaFX scrollbar customize. Eliminate extra square, when both scrollbars are activated

问题描述

我创建了下面的自定义滚动条，如下图所示

我使用下一个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：horizo​​ntal {
 -fx-background-color：transparent; 
} 
 
 .text-area .scroll-bar .thumb {
 -fx-background-color：deriv（black，50％）; 
} 
 
 .text-area .scroll-bar .thumb：hover {
 -fx-background-color：derived（black，70％）; 
} 
 
 .text-area .increment-button：hover，.text-area .decrement-button：hover {
 -fx-background-color：transparent; 
} 
 
 .text-area .track {
 -fx-background-color：transparent; 
} 
  

如何消除这两个滚动条被激活

b灵感来自Lunayah的回答

  .text-area .scroll-pane .corner {
 -fx-background-color ： 透明 ; 
} 
  

解决方案

你看到的方块称为.filler和.corner。你可以通过CSS应用任何你想要的颜色，以使它们不可见。我不知道这些是否可以删除。

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

I create the next customize scrollbars as in the image below

I used next 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;
}

How can I eliminate that extra ugly square, that appears when both scrollbars are activated?

Thank you very much for your time.

Solution Inspired from Lunayah answer

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

解决方案

The property name of the 2 squares you see are called .filler and .corner. You can apply whatever color you want to them through css in order to make them not visible. I dont know if those can be removed.

Ex : .scroll-bar .filler{ your color} Ex : .scroll-bar .corner{ your color}

这篇关于JavaFX滚动条自定义。当两个滚动条都被激活时，消除多余的方形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！