web-dev-qa-db-fra.com

Barre de défilement CSS web afficher/masquer

J'utilise -webkit-scrollbar et ce que je veux faire, c'est la barre de défilement masquée lors du chargement de la page. Elle reste masquée tant que vous ne passez pas la souris sur le conteneur div auquel elle est attachée. Lorsque vous survolez une zone défilable, cela apparaît.

J'ai essayé d'ajouter: hover et: focus affecte différents divs et règles dans mon code CSS sans succès.

Existe-t-il un moyen de faire ce que je veux dire en utilisant -webkit-scrollbar? Je pourrais poster du code, mais c'est assez simple. Juste une div externe avec les règles css qui y sont attachées, puis une div interne avec une hauteur et une largeur définies. Ensuite, les règles css pour -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;
}
htmlcsscss3
11
jz3

Il me semble avoir traversé le problème de la dissimulation automatique en CSS. Je l'ai fait d'une manière ou d'une autre sur mon application et je cherchais comment je l'avais obtenue. Le voici, une modification du violon existant par @tim 

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

Cela fait le tour:

body {overflow-y:hidden;}
body:hover {overflow-y:scroll;}
32
Dragunov

Vous pouvez utiliser des CSS simples pour y parvenir.

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 l'opacité du pouce sur zéro (au lieu de faire correspondre la couleur d'arrière-plan), mais l'opacité semble alors s'appliquer également aux autres barres de défilement de la page.

P.S. Cela suppose que votre couleur d'arrière-plan de ::-webkit-scrollbar-track correspond également à celle de #content-wrapper.

4
Markus Coetzee

J'ai fini par aller avec le plugin javascript de Slimscroll. Il serait bien d’avoir une solution 100% css, mais ce plugin est très bien fait et permet de se concentrer sur l’idée/masqué.

http://rocha.la/jQuery-slimScroll

3
jz3

Cacher le scrollthumb dans webkit n'est pas intuitif! Ma page devait masquer toutes les fonctionnalités de défilement du navigateur par défaut afin de mettre en œuvre nos propres effets de «défilement infini». La seule chose qui était difficile était l'incrustation "pouce" du kit Web, qui n'apparaît que lorsque l'écran est en mouvement (comme le défilement avec la molette). 

Afin de masquer ce webkit scrollthumb, nous avons dû appliquer certains styles à "tous", puis appliquer les effets de masquage à mes pouces spécifiques (nous devons le faire par programmation car nous ne savons pas si le contenu est suffisamment long pour le faire. effets de défilement personnalisés jusqu’à ce que la page soit chargée). 

Ce sont les styles que nous avons utilisés:

::-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;
}

alors, quand je détermine que je veux masquer par programme ce thumbHandle, je peux le faire avec jquery: $('#customScrollDiv').toggleClass('hideThumb');

La difficulté réside dans le fait que vous avez besoin de beaucoup de "défauts" de styles CSS que vous avez normalement obtenus, mais une fois que vous commencez à spécifier même l'un de ces styles de kit Web, vous avez besoin de THEM ALL ou ils ne seront pas appliqués.

1
Leo Lansford

voir cette démo de travail: http://jsfiddle.net/trpeters1/4RSbp/3/ qui est dérivé de ici:

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

1
tim peterson