JavaFX 8 滚动条 css

Question

我正在使用以下 css 来自定义我的滚动条

/* The main scrollbar **track** CSS class  */
.workspace-grid .scroll-bar:horizontal .track,
.workspace-grid .scroll-bar:vertical .track{
    -fx-background-color:transparent;
    -fx-border-color:transparent;
    -fx-background-radius: 0em;
    -fx-border-radius:2em;
}

/* The increment and decrement button CSS class of scrollbar */
.workspace-grid .scroll-bar:horizontal .increment-button ,
.workspace-grid .scroll-bar:horizontal .decrement-button {
    -fx-background-color:transparent;
    -fx-background-radius: 0em;
    -fx-padding:0 0 10 0;

}

/* The increment and decrement button CSS class of scrollbar */

.workspace-grid .scroll-bar:vertical .increment-button ,
.workspace-grid .scroll-bar:vertical .decrement-button {

    -fx-background-color:transparent;
    -fx-background-radius: 0em;
    -fx-padding:0 10 0 0;

}

.workspace-grid .scroll-bar .increment-arrow,
.workspace-grid .scroll-bar .decrement-arrow
{
    -fx-shape: " "; 
    -fx-padding:0;
}

/* The main scrollbar **thumb** CSS class which we drag every time (movable) */
.workspace-grid .scroll-bar:horizontal .thumb,
.workspace-grid .scroll-bar:vertical .thumb {
    -fx-background-color:derive(black,90%);
    -fx-background-insets: 2, 0, 0;
    -fx-background-radius: 2em;

}

但我的滚动条看起来像下面

如何使滚动条如下所示

已编辑

Answer 1

我猜您正在阅读此article，您从中获取了 CSS 属性（如果没有，请查看）。据我所知，这篇文章很好，解释了一切。他们的 CSS 只有一个小错误，但除此之外，如果您按照他们的说明进行操作，您将能够实现您想要的。

这是一个小例子：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class ScrollBarCSS extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        ScrollPane pane = new ScrollPane();
        pane.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm());

        Pane emptyPane = new Pane();
        emptyPane.setPrefSize(600, 600);

        pane.setContent(emptyPane);

        stage.setScene(new Scene(pane, 200, 200));
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

还有 CSS（更新）：

.scroll-bar:horizontal .track,
.scroll-bar:vertical .track{
    -fx-background-color :transparent;
    -fx-border-color :transparent;
    -fx-background-radius : 0.0em;
    -fx-border-radius :2.0em;
}


.scroll-bar:horizontal .increment-button ,
.scroll-bar:horizontal .decrement-button {
    -fx-background-color :transparent;
    -fx-background-radius : 0.0em;
    -fx-padding :0.0 0.0 10.0 0.0;

}

.scroll-bar:vertical .increment-button ,
.scroll-bar:vertical .decrement-button {
    -fx-background-color :transparent;
    -fx-background-radius : 0.0em;
    -fx-padding :0.0 10.0 0.0 0.0;

}

 .scroll-bar .increment-arrow,
 .scroll-bar .decrement-arrow{
    -fx-shape : " ";    
    -fx-padding :0.15em 0.0;
}

 .scroll-bar:vertical .increment-arrow,
 .scroll-bar:vertical .decrement-arrow{
    -fx-shape : " ";    
    -fx-padding :0.0 0.15em;
}

.scroll-bar:horizontal .thumb,
.scroll-bar:vertical .thumb {
    -fx-background-color :derive(black,90.0%);
    -fx-background-insets : 2.0, 0.0, 0.0;
    -fx-background-radius : 2.0em;
}

.scroll-bar:horizontal .thumb:hover,
.scroll-bar:vertical .thumb:hover {
    -fx-background-color :derive(#4D4C4F,10.0%);
    -fx-background-insets : 2.0, 0.0, 0.0;
    -fx-background-radius : 2.0em;
}

为了增加或减少滚动条增量箭头和减量箭头的-fx-padding（当然垂直也是如此）并增加或减少0.15em并找到您想要的外观。

结果：