WebView 中 JavaFX 滚动条交叉点的颜色

Question

每当 WebView 必须同时显示垂直和水平滚动条时，两个滚动条的交叉处会有一个白色小方 block 。

我想改变这个方 block 的颜色。

到目前为止我尝试了什么

我首先尝试修改 WebView、场景和 JavaFX 滚动条的背景颜色。但显然:

WebView are not your JavaFX UI control, but a part of the displayed webpage.

(see this post)

所以从this thread查到的资料来看我尝试修改以下元素的背景颜色:

• ::-webkit-滚动条
• ::-webkit-scrollbar-track
• 正文
• html
• 甚至 div 看看我得到了什么

任何人都知道如何更改这个白色方 block 的颜色？

您可以在下面找到我使用的代码。

代码

主程序.java

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("WebView.fxml"));
        primaryStage.setTitle("Hello World");
        primaryStage.setScene(new Scene(root, 300, 275));
        primaryStage.show();
    }


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

WebView.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.*?>
<?import javafx.scene.web.WebView?>
<AnchorPane
        fx:controller="sample.Controller"
        stylesheets="@WebView.css"
        prefHeight="400.0"
        prefWidth="600.0"
        xmlns="http://javafx.com/javafx/8"  xmlns:fx="http://javafx.com/fxml/1">
   <children>
            <WebView fx:id="webView"  prefHeight="400.0" prefWidth="600.0"
                     AnchorPane.bottomAnchor="0.0"
                     AnchorPane.leftAnchor="0.0"
                     AnchorPane.rightAnchor="0.0"
                     AnchorPane.topAnchor="0.0"/>
   </children>
</AnchorPane>

Controller .java

package sample;

import javafx.fxml.FXML;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;

public class Controller {

    @FXML
    public WebView webView;

    @FXML
    private void initialize(){
        WebEngine engine = webView.getEngine();
        engine.load("http://www.bing.com");
        engine.setUserStyleSheetLocation(getClass().getClassLoader().getResource("sample/UserStyleSheet.css").toExternalForm());
    }
}

Answer 1

现在已经快一年了，但对于任何需要知道如何实现这一点的人来说，都可以用这个来完成

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

您还可以使用此链接了解有关样式化滚动条的更多详细信息:http://www.guigarage.com/2015/11/styling-a-javafx-scrollbar/