Question

我正在Windows 10上使用JavaFX8。在带有深色背景的WebView中，当滚动条可见时，我可以看到浅灰色的角。 var demoObj = [ ((a, b) => ({ a, b, total: a * b }))(5, 2) ] console.log(demoObj) // [ // { // "a": 5, // "b": 7, // "total": 10 // } // ]“管理自动滚动”。我已经尝试过this以及其他选择器：

WebView

还有

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

但是它不起作用。那我该怎么办？

示例代码：主类

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

style.css

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

这也有可怕的行为，其中滚动条仅在我将鼠标悬停时出现，但不要紧。这在我的主应用程序中不会发生。 我只想更改角落的灰色正方形的颜色。

Answer 1

我无法在Java v1.8.0_201的Mac OS X v10.13.6上重现该效果。由于WebView“管理自动滚动”和JavaFX uses WebKit，因此@Pagbo suggests使用-webkit-scrollbar-corner，如建议here所示。在另一种情况下，@ DVarga建议使用-fx-background-color，如图here所示。由于效果可能取决于平台/版本，因此我添加了完整的示例和屏幕截图以供参考。特别是，垂直滚动条的减量按钮覆盖了右下角。拉伸窗口以隐藏垂直滚动条将显示水平滚动条的增量按钮。角落总是由滚动条按钮或黑色占据。

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

更改WebView中滚动条角的颜色

1 个答案: