3

JavaFXWebViewを使用してLog-Viewerを実装しました。

ただし、そのLog-Viewerのユーザーにとって大きな問題が1つあります。それは、WebViewerのスクロールバーが非常に薄いことです。スクロールスライダーをクリックすると「飛び跳ねて」しまい、そのスライダーをキャッチするのが必ずしも簡単ではなく、スクロールが機能しない場合があるという問題もありました（Windows 7 / XPでは、奇妙なことにWindows 8ではありません）。

少し手間と調査が必要でしたが、CSSでスクロールバーを変更できることがわかりました。ただし、自動スクロールが機能しなくなったか、「スミア」効果があり、スクロールバーが正しく描画されなかったという問題がありました。

多分誰かが問題の別の解決策を見つけました-私は以下に私の解決策を提示します。

4

1 に答える 1

4

私のソリューションでは、CSSを使用してWebkitのスクロールバーを変更しています。はじめにCSSトリックを参照 してください 。

考慮すべき点がいくつかあります。

最初に：position: absolute;javascriptでスクロールを使用する場合-likewindow.scrollToはもう機能しません。

2番目：の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); 
    }

<style>スクロールバーで使用されるHTMLのコンテンツのタグでこのCSSを使用するとWebEngine、新しい光沢のある光沢のある青と幅の広いスクロールバーになります。これにより、Win7/XPでのスクロールバーの「ホッピング」の問題も解決されます。

水平スクロールバーも変更するには、の高さ属性をwebkit-scrollbar指定する必要があり、のmin-width属性を...-scrollbar-thumb:vertical一緒に指定できます。

于 2013-03-14T19:37:48.453 に答える