JavaFx WebView - Scroll to desired position

StackOverflow https://stackoverflow.com/questions/22778241

Question

I am trying to create a web view and add contents to it. Will append contents to the web view on click of a button. Here i need to scroll the web view programmatically to a desired position say (0, 60). I tried using JavaScript and using setValue of ScrollBar class. But nothing works out. Here is the sample,

public class FxWebViewSample extends Application {

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

    @Override
    public void start(Stage primaryStage) throws Exception {

        Group root = new Group();

        final WebView wView = new WebView();
        wView.setId("my_view");
        wView.setPrefHeight(200);
        wView.setPrefWidth(200);
        final WebEngine engine = wView.getEngine();
        engine.loadContent("<body contentEditable='true'><div id='content'>Initial Text</div><div id='first'>My first web view in fx</div></body><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><div id='first'>My first web view in fx</div></body></body>");

        Button appendbtn = new Button("Append Text to Web View");

        TextArea area = new TextArea();
        area.setText("My text area");

        VBox vBox = new VBox();
        vBox.getChildren().addAll(wView, appendbtn);
        root.getChildren().add(vBox);

        Scene scene = new Scene(root, 300, 300);
        primaryStage.setScene(scene);
        primaryStage.show();

        appendbtn.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent arg0) {
                /** To append html and text contents to web view */
                String webViewContents = (String) engine
                        .executeScript("document.documentElement.outerHTML");
                String appendContent = "<div>Appended html content</div> Appended text content";
                engine.loadContent(webViewContents + appendContent);

                /**JavaScript to scroll the view*/
                //String scrollJsFtn = "var elem = document.getElementById('my_view');var x = 0;var y = 0;while (elem != null) {x += elem.offsetLeft;y += elem.offsetTop;elem = elem.offsetParent;}window.scrollTo(30, 30);";
                //engine.executeScript(scrollJsFtn);

                Set<Node> scrollBars = wView.lookupAll(".scroll-bar");
                for (Node node : scrollBars) {
                    if (node instanceof ScrollBar) {
                        ScrollBar sBar = (ScrollBar) node;
                        sBar.setValue(100.0);
                    }
                }
            }
        });

    }
}

Is there a way to set the scroll bar position of web view programmatically?

Was it helpful?

Solution

Figure it out. Using JavaScript the web view can be programmatically scrolled.

public class FxWebViewSample extends Application {

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

    @Override
    public void start(Stage primaryStage) throws Exception {

        Group root = new Group();

        final WebView wView = new WebView();
        wView.setId("my_view");
        wView.setPrefHeight(200);
        wView.setPrefWidth(200);
        final WebEngine engine = wView.getEngine();
        engine.setJavaScriptEnabled(true);
        engine.loadContent("<body contentEditable='true'><div id='content'>Initial Text</div><div id='first'>My first web view in fx</div></body><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><div id='first'>My first web view in fx</div></body></body>");

        Button appendbtn = new Button("Append Text to Web View");

        TextArea area = new TextArea();
        area.setText("My text area");

        VBox vBox = new VBox();
        vBox.getChildren().addAll(wView, appendbtn);
        root.getChildren().add(vBox);

        Scene scene = new Scene(root, 300, 300);
        primaryStage.setScene(scene);
        primaryStage.show();

        appendbtn.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent arg0) {
                /** To append html and text contents to web view */
                String webViewContents = (String) engine
                        .executeScript("document.documentElement.outerHTML");
                String appendContent = "<div id='append'>Appended html content</div> Appended text content";

                StringBuilder scrollHtml = scrollWebView(0, 50);

                engine.loadContent(scrollHtml + webViewContents + appendContent);
            }
        });

    }

    public static StringBuilder scrollWebView(int xPos, int yPos) {
        StringBuilder script = new StringBuilder().append("<html>");
        script.append("<head>");
        script.append("   <script language=\"javascript\" type=\"text/javascript\">");
        script.append("       function toBottom(){");
        script.append("           window.scrollTo(" + xPos + ", " + yPos + ");");
        script.append("       }");
        script.append("   </script>");
        script.append("</head>");
        script.append("<body onload='toBottom()'>");
        return script;
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top