Lepseudo-élémentCSS::scroll-button() représente un bouton permettant de contrôler le défilement d'unconteneur de défilement. Ces boutons sont générés sur les conteneurs de défilement lorsque leur propriétécontent n'est pas définie ànone. La direction du défilement est déterminée par la valeur du paramètre.

Syntaxe

::scroll-button(<scroll-button-direction>) {  /* ... */}

Paramètres

<scroll-button-direction>

Une valeur représentant la direction du bouton de défilement à sélectionner. Les valeurs suivantes sont disponibles :

*

Sélectionne tous les boutons de défilement de l'élément d'origine, ce qui permet de leur appliquer des mises en évidence dans une seule règle.

down

Sélectionne le bouton qui fera défiler le contenu vers le bas.

left

Sélectionne le bouton qui fera défiler le contenu vers la gauche.

right

Sélectionne le bouton qui fera défiler le contenu vers la droite.

up

Sélectionne le bouton qui fera défiler le contenu vers le haut.

block-end

Sélectionne le bouton qui fera défiler le contenu vers la fin du bloc.

block-start

Sélectionne le bouton qui fera défiler le contenu vers le début du bloc.

inline-end

Sélectionne le bouton qui fera défiler le contenu vers la fin de l'axe en ligne.

inline-start

Sélectionne le bouton qui fera défiler le contenu vers le début de l'axe en ligne.

La spécification définit également deux autres valeurs —next etprev — mais elles ne sont actuellement prises en charge par aucun navigateur.

Description

Les pseudo-éléments::scroll-button() sont générés à l'intérieur d'unconteneur de défilement uniquement lorsque leurs propriétéscontent sont définies sur une valeur autre quenone. Ils sont générés comme des éléments frères des enfants DOM du conteneur de défilement, immédiatement avant ceux-ci et avant tout::scroll-marker-group généré sur le conteneur.

Vous pouvez générer jusqu'à quatre boutons de défilement par conteneur, qui feront défiler le contenu vers le début et la fin des axes de bloc et en ligne. L'argument du sélecteur précise la direction de défilement sélectionnée. Vous pouvez aussi utiliser la valeur* pour cibler tous les pseudo-éléments::scroll-button() et leur appliquer des mises en évidence dans une seule règle.

Les boutons générés se comportent comme de véritables éléments<button>, y compris leurs styles par défaut spécifiques au navigateur. Ils sont focalisables, accessibles et peuvent être activés comme des boutons classiques. Lorsqu'un bouton de défilement est activé, le contenu du conteneur est défilé dans la direction spécifiée d'une « page », soit environ la dimension du conteneur, de manière similaire à la pression des touchesPgUp etPgDn.

Il est recommandé de configurer leverrouillage du défilement CSS sur le conteneur de défilement et de définir chaque élément de contenu que vous souhaitez défiler comme unecible d'ancrage. Ainsi, l'activation d'un bouton de défilement fera défiler le contenu jusqu'à la cible d'ancrage située à une « page » de distance. Bien que les boutons de défilement fonctionnent sans verrouillage du défilement, l'effet obtenu risque de ne pas être optimal.

Lorsqu'il n'est pas possible de défiler davantage dans une direction donnée, le bouton correspondant est automatiquement désactivé, sinon il est activé. Vous pouvez mettre en évidence les boutons de défilement dans leurs états activé et désactivé en utilisant les pseudo-classes:enabled et:disabled.

Exemples

VoirCréer des carrousels en CSS pour d'autres exemples.

Créer des boutons de défilement

Dans cet exemple, nous montrons comment créer des boutons de défilement sur un carrousel en CSS.

HTML

Nous avons une liste<ul> HTML de base avec plusieurs éléments<li>.

<ul>  <li>Élément 1</li>  <li>Élément 2</li>  <li>Élément 3</li>  <li>Élément 4</li>  <li>Élément 5</li>  <li>Élément 6</li>  <li>Élément 7</li>  <li>Élément 8</li></ul>

CSS

Mettre en évidence le carrousel

Nous transformons notre<ul> en carrousel en définissantdisplay surflex, créant une seule ligne non enroulée d'éléments<li>. La propriétéoverflow-x est définie surauto, ce qui signifie que si les éléments débordent de leur conteneur sur l'axe x, le contenu défile horizontalement. Nous convertissons ensuite le<ul> enconteneur d'ancrage au défilement, garantissant que les éléments s'alignent toujours lorsqu'on fait défiler le conteneur, grâce à une valeurscroll-snap-type demandatory.

ul {  display: flex;  gap: 4vw;  padding-left: 0;  overflow-x: auto;  overscroll-behavior-x: contain;  scroll-snap-type: x mandatory;}

Ensuite, nous mettons en évidence les éléments<li>, en utilisant la propriétéflex pour les rendre égaux à 100 % de la largeur du conteneur. La valeurscroll-snap-alignstart permet d'aligner le côté gauche de l'élément visible le plus à gauche avec le bord gauche du conteneur.

li {  list-style-type: none;  background-color: #eeeeee;  flex: 0 0 100%;  height: 100px;  padding-top: 20px;  scroll-snap-align: start;  text-align: center;}

Créer les boutons de défilement

Tout d'abord, tous les boutons de défilement sont ciblés avec des styles rudimentaires, ainsi qu'avec des mises en évidence selon différents états. Il est important de définir des styles:focus pour les utilisateur·ice·s utilisant un clavier. De plus, comme les boutons de défilement sont automatiquement mis en étatdisabled lorsqu'il n'est plus possible de défiler dans une direction, nous utilisons la pseudo-classe:disabled pour cibler cet état.

ul::scroll-button(*) {  border: 0;  font-size: 2rem;  background: none;  color: black;  opacity: 0.7;  cursor: pointer;}ul::scroll-button(*):hover,ul::scroll-button(*):focus {  opacity: 1;}ul::scroll-button(*):active {  translate: 1px 1px;}ul::scroll-button(*):disabled {  opacity: 0.2;  cursor: unset;}

Ensuite, une icône adaptée est définie sur les boutons gauche et droit via la propriétécontent, ce qui déclenche également la génération des boutons :

ul::scroll-button(left) {  content: "◄";}ul::scroll-button(right) {  content: "►";}

Il n'est pas nécessaire de définir detexte alternatif pour les icônes decontent, car le navigateur fournit automatiquement desnoms accessibles appropriés.

Résultat

Notez que les boutons de défilement apparaissent en bas à gauche du carrousel. Essayez de les activer pour voir comment le contenu défile.

Positionner les boutons de défilement

L'exemple précédent fonctionne, mais les boutons ne sont pas idéalement placés. Dans cette section, nous ajoutons du CSS pour les positionner en utilisantle positionnement par ancrage.

CSS

Tout d'abord, une référenceanchor-name est définie sur le<ul> pour l'identifier comme ancre nommée. Ensuite, chaque bouton de défilement a sa propriétéposition définie àabsolute et sa propriétéposition-anchor définie sur leanchor-name de la liste, afin deles associer.

ul {  anchor-name: --mon-carousel;}ul::scroll-button(*) {  position: absolute;  position-anchor: --mon-carousel;}

Pour positionner réellement chaque bouton de défilement, nous commençons par définir une valeuralign-selfanchor-center sur chacun, afin de les centrer verticalement sur le carrousel :

ul::scroll-button(*) {  align-self: anchor-center;}

Nous définissons ensuite des valeurs sur leurspropriétés d'insertion pour gérer le positionnement horizontal. Nous utilisons les fonctionsanchor() pour positionner les côtés des boutons par rapport aux côtés du carrousel. Dans chaque cas, la fonctioncalc() est utilisée pour ajouter un espace entre le bord du bouton et celui du carrousel. Par exemple, le bord droit du bouton gauche est placé 45 pixels à droite du bord gauche du carrousel.

ul::scroll-button(left) {  right: calc(anchor(left) - 45px);}ul::scroll-button(right) {  left: calc(anchor(right) - 45px);}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriétéscroll-marker-group
• Le pseudo-élément::scroll-marker-group
• Le pseudo-élément::scroll-marker
• Le pseudo-élément::column
• La pseudo-classe:target-current
• Créer des carrousels en CSS
• Le module dedébordement CSS
• Le module depositionnement par ancrage CSS
• Galerie de carrousels CSS^(angl.) par chrome.dev (2025)