JavaFX 2 WebView：如何增強滾動條

Question

我已經使用JavaFX WebView實現了Log-Viewer。

但是，對於該Log-Viewer用戶而言，存在一個大問題：Webviewer的滾動條非常薄。 我什至遇到了一個問題（在Windows 7 / XP上，奇怪的是在Windows 8上不是），當單擊滾動滑塊時，它“跳了起來”，並不總是很容易抓住該滑塊，有時滾動不起作用。

經過一些努力和研究，我發現可以使用CSS更改滾動條。 但是，我遇到了一些問題，要么自動滾動不再起作用，要么出現一些“拖尾”效果，並且滾動條未正確繪制。

也許有人找到了該問題的另一種解決方案-我將在下面介紹我的解決方案。

Answer 1

我的解決方案使用CSS更改webkit滾動條。 有關介紹，請參見CSS技巧 。

需要考慮以下幾點：

第一：使用position: absolute; javascript中的滾動-如window.scrollTo將不再起作用。

第二： scrollbar-track的background-color屬性是必需的。 當被忽略時（不使用絕對定位），滾動條的重繪功能將不再起作用。 這似乎是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的height屬性，並可以同時提供...-scrollbar-thumb:vertical的min-width屬性。