JavaFX 2 WebView：如何增强滚动条 [英] JavaFX 2 WebView: How to enhance the scrollbars

问题描述

我使用JavaFX WebView实现了一个Log-Viewer。

然而，对于该Log-Viewer的用户来说存在一个大问题：webviewer的滚动条非常薄。我甚至遇到了一个问题（在Windows 7 / XP上，奇怪的是在Windows 8上），当点击滚动滑块时，它跳开，并且抓住滑块并不总是很容易，有时滚动不起作用。 / p>

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

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

解决方案

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

有一些要考虑的要点：

第一种：
使用时的位置：绝对值; 在javascript中滚动 - 比如 window.scrollTo 将不再有效。

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

  body {
 / *隐藏水平滚动条* / 
 overflow-x：hidden; 
} 
 / *使滚动条更宽* / 
 ::  -  webkit-scrollbar {
宽度：16px; 
} 
 ::  -  webkit-scrollbar-track {
 background-color：white; 
} 
 / *滑块或拇指有一些圆边和阴影，它有点半透明* / 
 ::  -  webkit-scrollbar-thumb {
 border-半径：6px; 
 box-shadow：inset 0 0 6px rgba（0,0,0,0.5）; 
背景：rgba（159,216,239,0.8）; 
} 
 / *我不喜欢滚动条在大型文档上如此小 - 因此我设置了最小高度* / 
 ::  -  webkit-scrollbar-thumb：vertical {
 min-height：100px; 
} 
 / *当窗口处于非活动状态时使用更透明的滑块* / 
 ::  -  webkit-scrollbar-thumb：window-inactive {
 background：rgba（159,216,239， 0.2）; 
} 
  

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

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

I have implemented a Log-Viewer using the JavaFX WebView.

However there is one big issue for the users of that Log-Viewer: the scrollbars of the webviewer are very thin. I even had an issue (on Windows 7 / XP, strangely not on Windows 8) that when clicking on the scroll slider, it "hopped" away and it is not always easy to catch that slider and sometimes the scrolling does not work.

It took me some effort and research and I found that I can change the scrollbars with CSS. However I had some issues that either the automatic scrolling did not work any more or I had some "smear" effects and the scrollbar was not painted correctly.

Maybe someone has found another solution for the problem - I will present my solution below.

解决方案

My solution uses CSS to change the webkit scrollbar. See CSS Tricks for an introduction.

There are some points to be considered:

First: When using position: absolute; the scrolling in javascript - like window.scrollTo will not work any more.

Second: The background-color attribute for the scrollbar-track is mandatory. When left out (and not using absolute positioning) the redraw functionality of the scrollbar does not work any more. This seems to be a bug in the 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); 
    } 

When using this CSS in the <style> tag in the content of the HTML used by the WebEngine the scrollbars are new shiny glossy blue and wider scrollbars. This also solves the issue of the "hopping away" of the scrollbar on Win7/XP.

To change the Horizontal scrollbar as well - the height attribute in webkit-scrollbar has to be provided and the min-width attribute in ...-scrollbar-thumb:vertical can be provided along.

这篇关于JavaFX 2 WebView：如何增强滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！