Move the vertical scroll bar of a scroll panel to

Question

With JavaFX I want to move the vertical scroll bar of a scroll panel to the left side of the component, instead of the default right side. I tried to do it with -fx-alignment into CSS but not work.

.scroll-pane .scroll-bar:vertical {
    -fx-alignment: LEFT; }

Answer 1

You could

• create a ScrollBar
• bind the ScrollBar properties to the relevant properties of the ScrollPane
• hide the ScrollBars of the ScrollPane

Here's a quick draft:

ExternalScrollbar.java

import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.control.ScrollBar;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.scene.shape.Line;
import javafx.stage.Stage;

public class ExternalScrollbar extends Application {

    @Override
    public void start(Stage stage) {

        Pane pane = new Pane();
        Line line = new Line(100, 100, 1000, 1000);
        pane.getChildren().add(line);

        ScrollPane scrollPane = new ScrollPane();
        scrollPane.setContent(pane);

        ScrollBar vScrollBar = new ScrollBar();
        vScrollBar.setOrientation(Orientation.VERTICAL);
        vScrollBar.minProperty().bind(scrollPane.vminProperty());
        vScrollBar.maxProperty().bind(scrollPane.vmaxProperty());
        vScrollBar.visibleAmountProperty().bind(scrollPane.heightProperty().divide(pane.heightProperty()));
        scrollPane.vvalueProperty().bindBidirectional(vScrollBar.valueProperty());

        ScrollBar hScrollBar = new ScrollBar();
        hScrollBar.setOrientation(Orientation.HORIZONTAL);
        hScrollBar.minProperty().bind(scrollPane.hminProperty());
        hScrollBar.maxProperty().bind(scrollPane.hmaxProperty());
        hScrollBar.visibleAmountProperty().bind(scrollPane.widthProperty().divide(pane.heightProperty()));
        scrollPane.hvalueProperty().bindBidirectional(hScrollBar.valueProperty());

        // hide scrollpane scrollbars
// TODO: re-activate the code       
//      scrollPane.setVbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
//      scrollPane.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
//      scrollPane.setPadding(Insets.EMPTY);

        HBox hBox = new HBox();
        HBox.setHgrow(scrollPane, Priority.ALWAYS);
        hBox.getChildren().addAll(vScrollBar, scrollPane);

        VBox vBox = new VBox();
        VBox.setVgrow(hBox, Priority.ALWAYS);
        vBox.getChildren().addAll(hScrollBar, hBox);

        Scene scene = new Scene(vBox, 500, 400);
        scene.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm());

        stage.setScene(scene);
        stage.show();

        vScrollBar.requestLayout();
        hScrollBar.requestLayout();
    }

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

style.css

.scroll-pane {
    -fx-background-insets: 0;
    -fx-padding: 0;
}

.scroll-pane:focused {
    -fx-background-insets: 0;
}

.scroll-pane .corner {
    -fx-background-insets: 0;
}

Of course you have to activate the code with the hiding of the ScrollBars of the ScrollPane.