JavaFX 2 WebView：如何增强滚动条
我使用JavaFX WebView实现了一个Log-Viewer。
但是对于该Log-Viewer的用户来说存在一个大问题：webviewer的滚动条非常薄。 我甚至遇到了一个问题（在Windows 7 / XP上，奇怪的是不在Windows 8上），当点击滚动滑块时，它会“跳”掉并且抓住滑块并不总是很容易，有时滚动不起作用。
它花了我一些努力和研究，我发现我可以用CSS更改滚动条。 但是我有一些问题，自动滚动不再起作用，或者我有一些“涂抹”效果，滚动条没有正确绘制。
也许有人找到了问题的另一种解决方案 – 我将在下面提出我的解决方案。
我的解决方案使用CSS来更改webkit滚动条。 有关简介，请参阅CSS技巧 。
有一些要考虑的要点：
第一：当使用position: absolute; 在javascript中滚动 – 就像window.scrollTo将不再起作用。
第二： scrollbar-track的background-color属性是必需的。 当省略（并且不使用绝对定位）时，滚动条的重绘function不再起作用。 这似乎是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); }
当在WebEngine使用的HTML内容的
标签中使用此CSS时，滚动条是新的shiny的光泽蓝色和更宽的滚动条。 这也解决了Win7 / XP上滚动条“跳开”的问题。
要更改水平滚动条 - 必须提供webkit-scrollbar的height属性，并且可以提供...-scrollbar-thumb:vertical的min-width属性。