3

我已经使用 JavaFX WebView 实现了一个日志查看器。

然而，对于该 Log-Viewer 的用户来说，存在一个大问题：webviewer 的滚动条非常细。我什至遇到了一个问题（在 Windows 7 / XP 上，奇怪的是在 Windows 8 上没有），当单击滚动滑块时，它会“跳”走，并且捕捉该滑块并不总是那么容易，有时滚动不起作用。

我花了一些精力和研究，发现我可以用 CSS 更改滚动条。但是，我遇到了一些问题，即自动滚动不再起作用，或者我有一些“涂抹”效果并且滚动条没有正确绘制。

也许有人已经找到了解决该问题的另一种方法——我将在下面介绍我的解决方案。

4

1 回答 1

4

我的解决方案使用 CSS 来更改 webkit 滚动条。有关介绍，请参阅 CSS 技巧 。

有几点需要考虑：

第一：position: absolute;在 javascript 中使用滚动时 - likewindow.scrollTo将不再起作用。

第二： 的background-color属性scrollbar-track是强制性的。当被忽略（并且不使用绝对定位）时，滚动条的重绘功能不再起作用。这似乎是 webkit 中的一个错误。

    body {
        /* hide the horizontal scrollbar */
        overflow-x: hidden;
    }
    /* make the scrollbar a little wider */
    ::-webkit-scrollbar {
        width: 16px;
    }
    ::-webkit-scrollbar-track  {
        background-color: white;
    }
    /* the slider or "thumb" has some rounded edges and a shadow and it's a little translucent */
    ::-webkit-scrollbar-thumb {
        border-radius: 6px;
        box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
        background: rgba(159,216,239,0.8);
    }
    /* I don't like the scrollbar to be so tiny on large documents - hence I set a minimum height */
    ::-webkit-scrollbar-thumb:vertical {
        min-height: 100px;
    }
    /* Use a more translucent slider when the window is inactive */
    ::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(159,216,239,0.2); 
    }

在<style>标签中使用此 CSS 时，滚动条使用的 HTML 内容WebEngine是新的闪亮的蓝色和更宽的滚动条。这也解决了Win7/XP上滚动条“跳开”的问题。

要更改水平滚动条 - 必须提供 in 的 height 属性，webkit-scrollbar并且可以提供min-widthin 的属性...-scrollbar-thumb:vertical。

于 2013-03-14T19:37:48.453 回答