Question

I am trying to make a scrollpane with a scrollbar that has transparent (or at least solid) background by styling it with css in javafx 2.2.3.

.scroll-pane .track{-fx-opacity: 0;}
.scroll-pane .scroll-bar{-fx-base: transparent;}

Strangely, the code above makes scrollbar black. Giving -fx-base any value with alfa does that.

Background-color has no efect at all…

What am I missing?

Answer 1

Here is a sample which displays a scroll bar with a transparent background.

The sample includes some extra program logic to only show visual feedback on the scrollbar when the user hovers over the scrollbar – you may or may not need that.

The css related to the scrollbar in the sample is:

.address .scroll-pane {
  -fx-background-color: transparent;
}

.address .scroll-bar .increment-button {
  visibility: hidden;
}

.address .scroll-bar .decrement-button {
  visibility: hidden;
}

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

.address .scroll-bar:vertical .track-background {
  visibility: hidden;
}

.address .scroll-bar:vertical .track {
  visibility: hidden;
}

.address .hide-thumb .scroll-bar:vertical .thumb {
  -fx-background-color: transparent;
}

Where the scroll bar being made transparent has the additional custom style class of address assigned to it.

I determined the css to use by studying the scroll-bar section of the default JavaFX 2.2 css stylesheet caspian.css.

Output of the sample is: