JavaFX 8滚动条css [英] JavaFX 8 scroll bar css

问题描述

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

  / *主滚动条**轨道** CSS类* / 
 .workspace-grid .scroll-bar：horizo​​ntal .track，
 .workspace-grid .scroll-bar：vertical .track {
 -fx-background-color：transparent; 
 -fx-border-color：transparent; 
 -fx-background-radius：0em; 
 -fx-border-radius：2em; 
} 
 
 / *滚动条的增量和减量按钮CSS类* / 
 .workspace-grid .scroll-bar：horizo​​ntal .increment-button，
。 workspace-grid .scroll-bar：horizo​​ntal .decrement-button {
 -fx-background-color：transparent; 
 -fx-background-radius：0em; 
 -fx-padding：0 0 10 0; 
 
} 
 
 / *滚动条的增量和减量按钮CSS类* / 
 
 .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; 
} 
 
 / *我们每次拖动的主滚动条** thumb ** CSS类（可移动）* / 
 .workspace-grid .scroll-bar：horizo​​ntal。 thumb，
 .workspace-grid .scroll-bar：vertical .thumb {
 -fx-background-color：derive（black，90％）; 
 -fx-background-insets：2,0,0; 
 -fx-background-radius：2em; 
 
} 
  

但我的滚动条看起来如下

如何使滚动条看起来如下

编辑

解决方案

我猜你正在读这个

I am using the following css to customize my scrollbars

/* 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;

}

But my scrollbars looks like following

How to make the scrollbars looks like following

EDITED

解决方案

I am guessing you are reading this article from which you took the CSS properties (If not then have a look). From what I can see the article is fine and explains everything. They have only one minor mistake on their CSS but apart from that if you follow their instructions you will be able to achieve what you want.

Here is a mini example :

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);
    }
}

And the CSS (UPDATE):

.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;
}

In order to increase or decrease the -fx-padding for the scrollbar increment-arrow & decrement-arrow ( of course the vertical as well ) and increase or decrease the 0.15em and find the look you want.

The result :

这篇关于JavaFX 8滚动条css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！