How to customize javafx scroll finger width by css?

Question

How to customize javafx scroll finger width by css?

I tried to set the thickness to -fx-pref-height: 10px;

when the orientation is horizontal, and -fx-pref-width: 10px;

when the orientation of the scrollbar is vertical. But it doesn't work.

.scroll-bar:horizontal .thumb {
    -fx-background-color: derive(black, 90%);
    -fx-background-insets: 2, 0, 0;
    -fx-background-radius: 0em;
    -fx-pref-height: 10px;
}

.scroll-bar:vertical .thumb {
    -fx-background-color: derive(black, 90%);
    -fx-background-insets: 2, 0, 0;
    -fx-background-radius: 0em;
    -fx-pref-width: 10px;
}

How do I do this by customizing the css?

+3

css javafx scrollbar

Vanguard May 14 '17 at 19:15

source to share

3 answers

The width of the scrollbar is adjustable through its font size, for example:

.scroll-bar {
    -fx-font-size: 100px;
}

+1

anlar May 14 '17 at 19:42

source to share

Set padding to scrollbar arrow below css.

.scroll-bar .decrement-arrow {
    -fx-padding:2.25;
 }
.scroll-bar .increment-arrow {
    -fx-padding:2.25;
}

+1

Keyur bhanderi May 15 '17 at 8:35 am

source to share

Pakbert · Accepted Answer · 2017-12-19T07:04:22+0000

you can adjust the scrolling of the scroll bars to reduce the thickness of the thumb.

.scroll-bar:vertical {
    -fx-pref-width: 16.5;
    -fx-padding: 3;
}

.scroll-bar:horizontal {
    -fx-pref-height: 16.5;
    -fx-padding: 3;
}

.scroll-bar, .scroll-bar:pressed, .scroll-bar:focused {
    -fx-font-size: 15;
}

How to customize javafx scroll finger width by css?

More articles: