La scrollbar-gutterpropriété offre une flexibilité pour déterminer comment l'espace que le navigateur utilise pour afficher une barre de défilement qui interagit avec le contenu à l'écran. La spécification le décrit «réserver de l'espace pour la barre de défilement» et cela a du sens puisque c'est ce qu'est une gouttière en fin de compte: un conteneur qui réserve de l'espace pour tout ce qu'il contient et le sépare des autres éléments.
Nous sommes donc tous sur la même page, une barre de défilement est cette chose qui se trouve généralement sur le côté droit du navigateur (officiellement appelé «agent utilisateur» - ou UA - dans la spécification) qui indique votre position de défilement par rapport au total espace disponible sur la page Web.
Ceux-ci ont traditionnellement été un conteneur visuel avec un indicateur coulissant. Celles-ci sont appelées barres de défilement classiques . L'indicateur se trouve à l'intérieur de la gouttière et la gouttière occupe de l'espace physique sur l'écran lorsqu'elle est affichée.
Dernièrement, cependant, les apparences des barres de défilement ont tendance à être beaucoup plus minimes. Nous appelons ces barres de défilement superposées et elles sont partiellement ou totalement transparentes lorsqu'elles se trouvent au-dessus du contenu de la page. En d'autres termes, contrairement aux barres de défilement classiques qui occupent de l'espace physique à l'écran, les barres de défilement superposées se trouvent au-dessus du contenu de l'écran.
Pendant que nous y sommes, des barres de défilement peuvent apparaître à d'autres endroits. En plus d'être aligné à droite du navigateur, nous verrons des barres de défilement sur les éléments HTML où le contenu déborde de l'élément et la overflowpropriété (ou overflow-xet overflow-y) est définie sur la scrollvaleur. Et notez que l'existence de overflow-xmoyens que nous avons le défilement horizontal en plus du défilement vertical.
C'est ce dont nous parlons. Pas l'indicateur lui-même, mais le conteneur qui le contient. C'est la gouttière. Le fait qu'un navigateur utilise une barre de défilement classique ou superposée dépend totalement de l'UA lui-même. Ce n'est pas à nous de décider. Tel est le cas de la largeur de la barre de défilement. L'agent utilisateur définit cela et ne nous donne aucun contrôle sur cela.
C'est là scrollbar-gutterqu'intervient. Nous pouvons préciser si la gouttière est présente dans ses variantes classiques et superposées.
Syntaxe
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Une double esperluette (&&) sépare deux ou plusieurs composants, qui doivent tous apparaître, dans n'importe quel ordre.
Un point d'interrogation (?) Indique que le type, le mot ou le groupe précédent est facultatif (se produit zéro ou une fois).
Valeurs
auto(valeur initiale): à peu près le comportement par défaut décrit jusqu'à présent. La définition de la propriété sur cette valeur permet aux barres de défilement classiques de consommer de l'immobilier dans l'interface utilisateur sur les éléments où laoverflowpropriété de ces éléments est définie surscrollouauto. À l'inverse, les barres de défilement superposées ne prennent pas du tout de place en se posant au-dessus de l'élément.stable: Cela ajoute un petit comportement avisé en réservant toujours de l'espace pour la gouttière de la barre de défilement, tant que laoverflowpropriété sur le même élément est définie surscrollouautoet que nous avons affaire à une barre de défilement classique - même si la boîte ne déborde pas. À l'inverse, cela n'aura aucun impact sur une barre de défilement en superposition.always: Ceci agit de la même manière que,stablemais garantit que l'espace pour la gouttière de la barre de défilement est toujours réservé, que la barre de défilement soit classique ou superposée et que le contenu déborde ou non.both: Ceci indique qu'une gouttière à barre de défilement sera placée des deux côtés de l'élément lorsque la gouttière par défaut est affichée. Vous pouvez voir comment cela peut être utile si votre conception nécessite un espacement égal des deux côtés de l'élément.force: C'est le même que l' application à la foisstableetalwaysoù est l'élémentoverflowest réglé surauto,scroll,visible,hiddenouclip.
L'ébauche de travail de la spécification contient un tableau très pratique qui décompose ces définitions dans leurs contextes pour montrer la relation qu'elles entretiennent avec les barres de défilement classiques et superposées.
| Barres de défilement classiques | Superposer les barres de défilement | ||||
|---|---|---|---|---|---|
| débordement | barre de défilement-gouttière | Débordé | Ne déborde pas | Débordé | Ne déborde pas |
| faire défiler | auto | g | g | ||
| stable | GM | g | |||
| toujours | g | g | g | g | |
| auto | g | ||||
| stable | g | g | |||
| toujours | g | g | g | g | |
| visible, caché, clip | auto | ||||
| stable | F? | F? | |||
| toujours | F? | F? | F? | F? | |
"G" représente les cas où l'espace est réservé pour la gouttière de la barre de défilement, "f?" les cas où l'espace est réservé pour la gouttière de la barre de défilement si la force a été spécifiée et les cellules vides les cas où aucun espace n'est réservé.
Statut de spécification
La scrollbar-gutterpropriété est définie dans le module de débordement niveau 4, qui est en état de brouillon de travail. Cela signifie qu'il s'agit toujours d'un travail en cours et qu'il pourrait changer d'ici le moment où le projet passe à la recommandation candidate.
la spécification du module de débordement niveau 3 est également une ébauche de travail, c'est donc une bonne indication que (1) il faudra un certain temps pour scrollbar-gutterdevenir une recommandation et (2) elle est toujours en cours.
Prise en charge du navigateur
Il n'y a pas de prise en charge du navigateur au moment de la dernière mise à jour.
Plus d'information
- Brouillon de travail du module de débordement CSS 4
- Numéro 92 de GitHub
- Le groupe de travail CSS au TPAC: Quoi de neuf en CSS? Y compris une proposition dessinée à la main pour le tableau décrivant le comportement des valeurs de propriété.