How to hide scrollbars in the JavaFX WebView - scala

Question

I'm trying to remove the scrollbars in a javafx webview.
Search on forums, the suggestion is to make them invisible as follows:
browser.getChildrenUnmodifiable().addListener(new ListChangeListener<Node>() {
#Override public void onChanged(Change<? extends Node> change) {
Set<Node> deadSeaScrolls = browser.lookupAll(".scroll-bar");
for (Node scroll : deadSeaScrolls) {
scroll.setVisible(false);
}
}
})
However, I receive the following error:
"trait ListChangeListener is abstract; cannot be instantiated"
I can understand why its failing, but then again, why are people using this code with success? I'm using Eclipse and the code is surrounded in Scala code.
Thanks!
S

Answer 1

I wrote the scroll bar hiding code you refer to and posted it to a forum.
I tried it again using WinXPsp3, JavaFX 2.2b13, JDK7u6b14ea and it still works for me.
I have never tried accessing the code from Scala, so you may have run into some Java<->Scala interoperability issue. Java does not have traits, so the error you receive would appear Scala related. I added a Scala tag to your question, so maybe somebody with Scala expertise could help.
Here is a short, compilable test application I used to recheck the functionality.
import java.util.Set;
import javafx.application.Application;
import javafx.collections.ListChangeListener;
import javafx.collections.ListChangeListener.Change;
import javafx.scene.*;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
// demos showing a webview which does not visibly display scrollbars.
public class NoScrollWebView extends Application {
public static void main(String[] args) { launch(args); }
#Override public void start(Stage primaryStage) {
// show a doc in webview.
final WebView webView = new WebView();
webView.getEngine().load("http://docs.oracle.com/javafx/2/get_started/jfxpub-get_started.htm");
primaryStage.setScene(new Scene(webView));
primaryStage.show();
// hide webview scrollbars whenever they appear.
webView.getChildrenUnmodifiable().addListener(new ListChangeListener<Node>() {
#Override public void onChanged(Change<? extends Node> change) {
Set<Node> deadSeaScrolls = webView.lookupAll(".scroll-bar");
for (Node scroll : deadSeaScrolls) {
scroll.setVisible(false);
}
}
});
}
}
The best solution here, would probably be to provide a new WebView control skin which does not not have any controls in it - but that would likely be difficult until the WebView control is open sourced.

Answer 2

The simplest way to do this is to provide a NoOp Skin for .scroll-bar components in your scene CSS file.
So, in the CSS enter something like:
.scroll-bar {
-fx-skin: "org.acme.visual.NoOpScrollbarSkin";
}
and subclass SkinBase class:
public class NoOpScrollbarSkin extends SkinBase<ScrollBar,ScrollBarBehavior> {
public NoOpScrollbarSkin(ScrollBar scrollBar, ScrollBarBehavior scrollBarBehavior) {
super(scrollBar, scrollBarBehavior);
}
public NoOpScrollbarSkin(ScrollBar scrollBar) {
super(scrollBar, new ScrollBarBehavior(scrollBar));
}
}
EDIT: this example doesn't appear to work for WebView because of a cast to com.sun.javafx.scene.control.skin.ScrollBarSkin. Solution is not better than previous checking for node changes, one has to subclass ScrollBarSkin to override behavior.

Answer 3

When setting up your WebView add this code:
engine.getLoadWorker().stateProperty().addListener(new ChangeListener<State>()
{
public void changed(ObservableValue<? extends State> o, State old, final State state)
{
if (state == State.RUNNING || state == State.SUCCEEDED)
{
// System.out.println("Page: " + state + ": " + engine.getLocation());
engine.executeScript("document.body.style.overflow = 'hidden';");
}
}
});
This code will remove the scrollbars of any web-page that is loaded in the WebView.
Unfortunately while the page is loading there might be a scrollbar for a short moment (if the webpage specified one in its markup).

Answer 4

I was able to remove the scrollbars by adding the following
css block to my global html stylesheet
body {
overflow-x: hidden;
overflow-y: hidden;
}

Answer 5

In JavaFx put newCascadeStyleSheet.css in resource folder :
body {
overflow-x: hidden;
overflow-y: hidden;
}
And then in Webview :
webView.getEngine().setUserStyleSheetLocation(getClass().getResource("/newCascadeStyleSheet.css").toExternalForm());
Thats All.