JavaFX 2 WebView: Comment améliorer les barres de défilement

J'ai implémenté un Log-Viewer en utilisant JavaFX WebView.JavaFX 2 WebView: Comment améliorer les barres de défilement

Cependant, il y a un gros problème pour les utilisateurs de ce Log-Viewer: les barres de défilement du Webviewer sont très minces. J'ai même eu un problème (sur Windows 7/XP, étrangement pas sur Windows 8) qui en cliquant sur le curseur de défilement, il "sautait" loin et il n'est pas toujours facile d'attraper ce curseur et parfois le défilement ne fonctionne pas.

Il m'a fallu quelques efforts et de la recherche et j'ai trouvé que je peux changer les barres de défilement avec CSS. Cependant j'ai eu quelques problèmes que le défilement automatique n'a pas fonctionné plus ou j'ai eu quelques "frottis" effets et la barre de défilement n'a pas été peinte correctement.

Peut-être que quelqu'un a trouvé une autre solution au problème - je vais présenter ma solution ci-dessous.

Source

2013-03-14 michael_s

Ma solution utilise CSS pour changer la barre de défilement du webkit. Voir CSS Tricks pour une introduction.

Il y a quelques points à considérer:

Première: Lorsque vous utilisez position: absolute; le défilement en javascript - comme window.scrollTo ne fonctionnera plus.

Deuxième: L'attribut background-color pour le scrollbar-track est obligatoire. Lorsqu'elle est laissée de côté (et n'utilise pas le positionnement absolu), la fonctionnalité de rafraîchissement de la barre de défilement ne fonctionne plus. Cela semble être un bug dans le 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); 
    }

Lorsque vous utilisez ce CSS dans la balise <style> dans le contenu du code HTML utilisé par le WebEngine les barres de défilement sont nouveaux et plus larges barres de défilement bleu brillant brillant. Cela résout également le problème du "saut" de la barre de défilement sur Win7/XP.

Pour modifier également la barre de défilement horizontale - l'attribut height dans webkit-scrollbar doit être fourni et l'attribut min-width dans ...-scrollbar-thumb:vertical peut être fourni.

Source

2013-03-14 19:37:48

Salut Michael! Quelle partie de ce CSS consistait à réparer la partie décrite comme "il n'est pas toujours facile d'attraper ce curseur et parfois le défilement ne fonctionne pas"? –

On dirait qu'ils ont corrigé le problème "hop-away" dans JavaFX récent ou je ne pouvais pas le reproduire. Cependant, les barres de défilement sont encore assez petites par défaut et je ne pense pas qu'elles semblent bonnes, alors je continue à utiliser la solution CSS. –

J'ai compris moi-même que le problème est passé si vous stylisez votre barre de défilement avec CSS webkit. Je pense que sous le capot, JavaFx passe du rendu personnalisé à la feuille de style définie par l'utilisateur et cela élimine le problème. –

JavaFX 2 WebView: Comment améliorer les barres de défilement

Répondre

Questions connexes