Barre de défilement CSS webkit afficher / masquer

Je suis aide -webkit-scrollbar et ce que je veux est la barre de défilement caché au chargement de la page, et il reste caché jusqu'à ce que vous passez la souris sur le conteneur div, il est attaché. Lorsque vous survolez une zone déroulante, il semblerait.

J'ai essayé d'ajouter :hover et :focus affecte de diverses divs et les règles dans mon CSS avec pas de chance.

Est-il un moyen de faire ce que je fais allusion à l'utilisation -webkit-scrollbar? Je pouvais poster le code, mais c'est assez simple. Juste un div extérieure avec les règles css attaché à elle, puis interne des div avec la hauteur et la largeur. Ensuite, les règles css -webkit-scrollbar.

#u #trail ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
#u #trail ::-webkit-scrollbar-button:start:decrement,
#u #trail ::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 0;
    background-color: transparent;
}
#u #trail ::-webkit-scrollbar-track-piece {
    background-color: #FAFAFA;
    -webkit-border-radius: 0;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
}
#u #trail ::-webkit-scrollbar-thumb:vertical {
        height: 50px;
        background-color: #999;
        -webkit-border-radius: 8px;
}
#u #trail ::-webkit-scrollbar-thumb:horizontal {
    width: 50px;
    background-color: #999;
    -webkit-border-radius: 8px;
}
#u #trail-overflow {
    width: 860px;
    max-height: 500px;
   overflow: auto;
}

source d'informationauteur jz3

  1. 31

    Me semble que j'ai obtenu grâce à l'auto masquer chose dans le css. J'ai en quelque sorte fait sur mon application, et était à la recherche de comment je l'ai eu. Ici, il est, une modification de l'existant tripoter par @tim

    http://jsfiddle.net/4RSbp/165/

    Cela fait l'affaire:

    body {overflow-y:hidden;}
body:hover {overflow-y:scroll;}
  2. 4

    Vous pouvez utiliser CSS simple pour atteindre cet objectif.

    Par exemple. si vous avez un div #content-wrapperqui défile avec background-color: rgb(250, 249, 244);

    #content-wrapper::-webkit-scrollbar-thumb {
  background-color: rgb(250, 249, 244); /* Matches the background color of content-wrapper */
}

#content-wrapper:hover::-webkit-scrollbar-thumb {
  background-color: gray;
}

    F. Y. I. Vous pouvez définir le pouce de l'opacité à zéro (au lieu de l'associer la couleur d'arrière-plan), mais l'opacité semble alors s'appliquer à d'autres barres de défilement sur la page.

    P. S. Cela suppose que vous êtes ::-webkit-scrollbar-track's couleur d'arrière-plan correspond également à la #content-wrapper's couleur d'arrière-plan.

  3. 3

    J'ai fini par aller avec le slimscroll javascript plugin. Il serait cool d'avoir un css solution, mais ce plugin est très bien fait, et permet la mise au point-montré/caché idée.

    http://rocha.la/jQuery-slimScroll

  4. 1

    voir ce travail de démonstration: http://jsfiddle.net/trpeters1/4RSbp/3/
    qui a été dérivée à partir d'ici:

    http://css-tricks.com/examples/WebKitScrollbars/

  5. 1

    Cacher le scrollthumb dans webkit est non-intuitif!
    Ma page a besoin de masquer tous les navigateur par défaut de défilement des fonctionnalités afin de mettre en œuvre nos propres "infinite scroll" effets. La seule chose qui a été dur a été le webkit "pouce" de superposition, qui ne s'affiche que lorsque l'écran est en mouvement (comme le défilement avec la molette de la souris).

    Afin de cacher ce webkit scrollthumb nous avons dû appliquer des styles à "tous" scrollthumbs, puis d'appliquer le masquage des effets précis de ma pouces (nous avons pour ce faire par programme parce que nous ne sommes pas sûr si le contenu est assez long à faire notre coutume effets de défilement jusqu'à ce que la page est chargée).

    Ce sont les styles que nous avons utilisé:

    ::-webkit-scrollbar { /* required, although an apparent no-op */
    color: inherit;
}
::-webkit-scrollbar-thumb { /* leave most bars alone */
    background-color: grey;
}
#customScrollDiv::-webkit-scrollbar-thumb { /* this is the one we care about */
    background-color: grey;
}
.hideThumb::-webkit-scrollbar-thumb { /* we apply the style to actually hide it*/
    display: none; 
}       
.hideThumb { /* required, although an apparent no-op */
    background-color: white;
}

    puis, quand je constate que je veux masquer par programme que thumbHandle je peux le faire avec jquery: $('#customScrollDiv').toggleClass('hideThumb');

    La partie délicate est que vous avez besoin de beaucoup de "défaut" de styles CSS que, normalement, vous obtenu hors de la boîte, mais une fois que vous commencez en précisant même l'un de ces webkit styles ci-dessus, alors vous avez besoin de TOUTES ou ils ne seront pas appliquées.