JavaFX 2 WebView：如何增强滚动条

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

然而，对于该日志查看器的用户来说，有一个大问题：网络查看器的滚动条非常细。我什至遇到了一个问题（在 Windows 7 / XP 上，奇怪的是在 Windows 8 上没有），当单击滚动滑块时，它会“跳”走，并且并不总是很容易抓住该滑块，有时滚动不起作用。

我花了一些努力和研究，我发现我可以用 CSS 改变滚动条。然而，我遇到了一些问题，要么自动滚动不再起作用，要么有一些“涂抹”效果，并且滚动条未正确绘制。

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

我的解决方案使用 CSS 来更改 webkit 滚动条。看CSS 技巧进行介绍。

有几点需要考虑：

第一的： 使用时position: absolute;javascript 中的滚动 - 就像window.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); 
    } 

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

要更改水平滚动条 - 中的高度属性webkit-scrollbar必须提供并且min-width属性在...-scrollbar-thumb:vertical可以一起提供。