web-dev-qa-db-fra.com

Barre de défilement verticale CSS rembourrage gauche / droite dans UL possible?

Est-il possible d'ajouter un remplissage ou une marge autour de l'élément de la barre de défilement ou de la piste de la barre de défilement? J'ai essayé et je ne peux obtenir que le rembourrage haut/bas. L'ajout d'un remplissage à l'UL n'a aucun effet sur la barre de défilement. Les marges négatives sur la barre de défilement n'ont aucun effet. Des idées? JS Fiddle here .

::-webkit-scrollbar {
width: 12px;
margin:10px;
}

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 10px
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8); 
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
cssscrollbar
29
sandraqu

Vous pouvez voir un exemple là-bas ( http://jsfiddle.net/6KprJ/1/ ), oubliez fondamentalement d'y ajouter une marge ou un remplissage, augmentez simplement la largeur/hauteur de la zone de défilement et diminuez la largeur hauteur du pouce/piste.

Cité de comment personnaliser le défilement personnalisé?

::-webkit-scrollbar {
    width: 14px;
    height: 18px;
}
::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}
61
Bora Alp Arat

Cette solution crée un véritable espace entre le contenu et la barre de défilement (si un élément déroulant n'a pas de fond transparent). Utile pour les barres de défilement des fenêtres.

.scroll {overflow:auto;}
.scroll::-webkit-scrollbar {
    width:16px;
    height:16px;
    background:inherit;
}
.scroll::-webkit-scrollbar-track:vertical {
    border-right:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:vertical {
    border-right:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-track:horizontal {
    border-bottom:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:horizontal {
    border-bottom:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-corner,
    .scroll::-webkit-resizer {background:inherit;
    border-right:8px solid rgba(255,255,255,.2); //optional
    border-bottom:8px solid rgba(255,255,255,.2); //optional
}
3
Henry Brewer