WebView中的JavaFX Scrollbar交集颜色

时间:2015-09-01 14:27:28

标签: java webview javafx scrollbar

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

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

Two scrollbars in a webview

到目前为止我尝试了什么

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

  

WebView不是您的JavaFX UI控件,而是显示的网页的一部分。

     

(见this post

因此,根据this thread中的信息,我尝试修改以下元素的背景颜色:

  • :: - webkit-scrollbar
  • :: - WebKit的滚动轨
  • HTML
  • 甚至div来看看我得到了什么

任何人都知道如何改变这个白色方块的颜色?

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

代码

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

1 个答案:

答案 0 :(得分:0)

已经差不多一年了但是对于任何需要知道如何实现这一目标的人来说都可以用这个来完成

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

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