JavaFX 2 WebView：如何增强滚动条

我已经使用JavaFX WebView实现了一个日志查看器。JavaFX 2 WebView：如何增强滚动条

但是，对于该日志查看器的用户来说存在一个大问题：web查看器的滚动条非常薄。我甚至有一个问题（在Windows 7/XP上，奇怪的是不是在Windows 8上），当单击滚动滑块时，它会“跳”出去，并不总是很容易捕捉到该滑块，有时滚动不起作用。

我花了一些努力和研究，发现我可以用CSS更改滚动条。不过，我有一些问题，无论是自动滚动不再工作，或者我有一些“拖影”效果和滚动条没有正确地画。

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

来源

2013-03-14 michael_s

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

有要考虑的一些要点：

第一：当在JavaScript中使用position: absolute;滚动 - 像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); 
    }

当在由WebEngine使用的HTML内容的<style>标签使用这个CSS滚动条是新的闪亮光泽的蓝色和更广泛的滚动条。这也解决了Win7/XP上滚动条“跳过”的问题。

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

来源

2013-03-14 19:37:48

嘿迈克尔！这个CSS的哪个部分正在修复被描述为“捕获该滑块并不总是容易，并且有时滚动不起作用”的部分？ – 2013-10-25 07:31:43

似乎他们修复了最近JavaFX中的“跳出”问题，或者我无法重现它。不过，默认情况下，滚动条仍然很小，我认为它们看起来不太好，所以我继续使用CSS解决方案。 – 2013-10-28 12:21:31

我自己发现，如果您使用webkit CSS设计您的滚动条，问题就消失了。我认为，JavaFx将自定义渲染切换到用户定义的样式表，并摆脱了这个问题。 – 2013-10-28 12:57:47

JavaFX 2 WebView：如何增强滚动条

回答

相关问题