如何在JavaFX WebView中隐藏滚动条

Question

我正在尝试移除JavaFX WebView中的滚动条。在论坛上搜索后，建议的方法是将其设置为不可见，代码如下：

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

然而，我收到了以下错误信息：

"trait ListChangeListener是抽象的；无法实例化"

我可以理解为什么它会失败，但是为什么其他人使用这段代码却能成功呢？我正在使用Eclipse，代码被包含在Scala代码中。

谢谢！ S

- user1482640

Answer 1

我写了你所提到的滚动条隐藏代码，并将其发布到论坛上。

我再次尝试使用WinXPsp3，JavaFX 2.2b13，JDK7u6b14ea，它仍然对我有效。

我从未尝试过从Scala访问代码，因此您可能遇到了一些Java<->Scala互操作问题。Java没有特征，因此您收到的错误似乎与Scala有关。我在您的问题中添加了一个Scala标记，因此也许有Scala专家可以帮助。

这是一个短小的可编译测试应用程序，我用它来重新检查功能性。

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

这里最好的解决方案可能是提供一个新的WebView控件皮肤，它没有任何控件 - 但在WebView控件开源之前，这可能会很困难。

- jewelsea

---

我确认该解决方案在19版本中有效。谢谢。 - Dmitriy

Answer 2

我能够通过将以下CSS块添加到我的全局HTML样式表中来删除滚动条

body {
   overflow-x: hidden;
   overflow-y: hidden;
}

- Eric C.

Answer 3

将 newCascadeStyleSheet.css 文件放入 JavaFx 的资源文件夹中：

body {
    overflow-x: hidden;
    overflow-y: hidden;
}

然后在Webview中：

webView.getEngine().setUserStyleSheetLocation(getClass().getResource("/newCascadeStyleSheet.css").toExternalForm());

就这些。

- Noor Hossain

---

这个在JavaFX 18中不起作用。但是@jewelsea在https://dev59.com/4GXWa4cB1Zd3GeqPMmqN#11217910的做法是有效的。 - Jan

Answer 4

最简单的方法是在场景CSS文件中为.scroll-bar组件提供一个NoOp Skin。

因此，在CSS中输入类似以下内容：

.scroll-bar {
    -fx-skin: "org.acme.visual.NoOpScrollbarSkin";
}

并且继承 SkinBase 类：

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

编辑：这个例子似乎对于WebView不起作用，因为它将com.sun.javafx.scene.control.skin.ScrollBarSkin转换为了其他类型。解决方案并没有比之前检查节点变化更好，一个必须子类化ScrollBarSkin来覆盖行为。

- Dan Vulpe

Answer 5

在设置WebView时，请添加以下代码：

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';");
        }
    }

});

这段代码将移除 WebView 中加载的任何网页的滚动条。

不幸的是，在页面加载时可能会出现滚动条短暂出现的情况（如果网页在其标记中指定了滚动条）。

- Frederic Leitenberger