CODEWITHSUNDEEP
cssjavafxscrollbar
user3804769
user3804769

Reputation: 507

Change the color of the Scrollbar corner in WebView

I'm working with JavaFX 8 on Windows 10. In a WebView with a dark background, I can see the light grey corner when the scrollbars are visible. WebView"manages scrolling automatically." I already tried this, as well as other selectors:

.corner {
  -fx-background-color: black;
}

And also

.corner {    
    -fx-background-color: black;
}
.scroll-bar > .corner {    
    -fx-background-color: black;
}
.scroll-pane > .corner {    
    -fx-background-color: black;
}
.scroll-bar .corner {    
    -fx-background-color: black;
}
.scroll-pane .corner {    
    -fx-background-color: black;
}
.web-view .scroll-bar .corner {    
    -fx-background-color: black;
}
.web-view .scroll-pane .corner {    
    -fx-background-color: black;
}

But it doesn't work. So what could I do?

Image

Example code: Main class

public class Main extends Application {


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

    @Override
    public void start(Stage primaryStage) {

        WebView webView = new WebView();
        WebEngine webEngine = webView.getEngine();
        webEngine.loadContent("<html><body><pre>This is a very very very very very very long string </pre><b>test</b><p>1</p><p>2</p><p>3</p></body></html>");

        webEngine.setUserStyleSheetLocation("data:,body {  background: black; color: white; } ");

        StackPane root = new StackPane();
        root.setPadding(new Insets(5));
        root.getChildren().add(webView);
        webView.setStyle("-fx-background-color:black;");
        root.setStyle("-fx-background-color:black;");
        root.getStylesheets().add("style.css");
        primaryStage.setTitle("JavaFX Test");

        primaryStage.setScene(new Scene(root, 300, 150));
        primaryStage.show();
    }
}

style.css

.scroll-bar .track {
    -fx-background-color: black;    
}

.scroll-bar .thumb {
    -fx-background-color: brown;
}

.corner {
    -fx-background-color: black;
}

This also has an awful behavior where the scrollbars only appear when I hover with the mouse, but nevermind. This doesn't happen in my main application. I just want to change the color of the grey square in the corner.

Upvotes: 0

Views: 1158

Answers (1)

trashgod
trashgod

Reputation: 205785

I am unable to reproduce the effect on Mac OS X v10.13.6 with Java v1.8.0_201. Because WebView "manages scrolling automatically" and JavaFX uses WebKit, @Pagbo suggests using -webkit-scrollbar-corner, as suggested here. In another context, @DVarga suggests using -fx-background-color, as shown here. As the effect may be platform/version dependent, I've added a complete example and screenshot for reference. In particular, the lower-right corner is overlain by the vertical scrollbar's decrement button. Stretching the window to hide the vertical scrollbar reveals the horizontal scrollbar's increment button. The corner is always occupied by a scrollbar button or black.

image

Main.java

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class Main extends Application {

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

    @Override
    public void start(Stage primaryStage) {
        WebView webView = new WebView();
        WebEngine webEngine = webView.getEngine();
        webEngine.loadContent("<html><body><pre>"
            + "This is a very very very very very very long string<br>"
            + System.getProperty("os.name") + " v"
            + System.getProperty("os.version") + "; Java v"
            + System.getProperty("java.version")
            + "</pre><b>test</b><p>1</p><p>2</p><p>3</p></body></html>");
        webEngine.setUserStyleSheetLocation("data: ,body "
            + "{ background: black; color: white; } "
            + "::-webkit-scrollbar-corner { background: #0c0c0c; } ");
        StackPane root = new StackPane();
        root.setPadding(new Insets(5));
        root.getChildren().add(webView);
        webView.setStyle("-fx-background-color:black;");
        root.setStyle("-fx-background-color:black;");
        root.getStylesheets().add("style.css");
        primaryStage.setTitle("JavaFX Test");
        primaryStage.setScene(new Scene(root, 300, 150));
        primaryStage.show();
    }
}

style.css 

.scroll-bar .track {
    -fx-background-color: black;    
}

.scroll-bar .thumb {
    -fx-background-color: brown;
}

.corner {
    -fx-background-color: black;
}

Upvotes: 1

Related Questions