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;

}

但我的滚动条看起来像是跟随

如何使滚动条看起来如下

EDITED

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并找到你想要的外观。

结果 ：