JavaFX 2 WebView:如何增强滚动条

Question

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

然而，对于日志查看器的用户来说，有一个大问题:web查看器的滚动条非常薄。我甚至有一个问题(在Windows 7/XP上，奇怪的是在Windows 8上没有)，当点击滚动条时，它"跳"走了，它并不总是很容易抓住那个滑动条，有时滚动不起作用。

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

也许有人已经找到了解决这个问题的另一种方法——我将在下面展示我的解决方案。

Answer 1

我的解决方案使用CSS来改变webkit滚动条。看到CSS技巧作为介绍。

有几点需要考虑:

:当使用position: absolute;时，在javascript - like window.scrollTo中滚动将不再工作。

第二:

scrollbar-track的background-color属性为必选项。当遗漏(并且不使用绝对定位)时，滚动条的重绘功能不再工作。这似乎是webkit中的一个bug。

    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>标签在WebEngine使用的HTML内容中使用这个CSS时，滚动条是新的闪亮的蓝色和更宽的滚动条。这也解决了Win7/XP上滚动条"跳开"的问题。

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