`::scroll-button()` - Sélecteur CSS

::scroll-button()

Résumé des caractéristiques du sélecteur `::scroll-button()`

Description rapide

Cible les boutons de défilement. La valeur passée en paramètre indique plus précisément quel bouton doit être ciblé.

Statut

Problèmes de compatibilité ⚠

Module W3C

Module CSS - Débordements

Références (W3C)

CSS Overflow Module Level 5

Statut du document: WD (document de travail)

Pseudo-élément `::scroll-button()` - Description

⚠

Le sélecteur ::scroll-button() n'est pour l'instant reconnue que par Chrome

et Edge

(2025).

::scroll-button() fait partie du module "module CSS - Débordements" qui fournit plusieurs techniques pour afficher des méthodes de défilement comme les marqueurs.
::scroll-button() cible les boutons de défilement. Ce ne sont pas les boutons habituels, situés au bout des barres de défilement, mais des boutons générés.

Ces boutons se grisent automatiquement lorsqu'ils ne sont plus utilisables : première page pour le bouton qui permet de reculer ou dernière page sur celui qui permet d'avancer.

😇

😈

😎

😓

😨

😭

😱

Voici les styles pour obtenir cela. Tout d'abord transformons le conteneur en carrousel. Cela se fait avec la propriété display et les propriétés width et height. La propriété overflow est nécessaire pour masquer les parties qui déborde du conteneur. La propriété scroll-snap-type fait en sorte que le défilement du conteneur amène toujours un smiley en plein écran.


	#description1 {
	   display:flex; 
	   overflow:hidden; 
	   scroll-snap-type:x mandatory; 
	}

Agissons ensuite sur les élément du carrousel, pour terminer le positionnement du contenu à chaque défilement (propriété scroll-snap-align).


	#description1 div {
	   scroll-snap-align:start;
	}

Enfin nous allons agir sur les boutons left et right puisque le défilement se fait de droite à gauche. Les boutons up et bottom existent aussi pour les défilement verticaux. Le contenu des deux boutons est défini avec la propriété content.


	#description1a::scroll-button(left) {
	   content:'⮜';
	}
	#description1a::scroll-button(right) {
	   content:'⮞';
	}

Syntaxes du pseudo-élément `::scroll-button()`.

::scroll-button(left) { ... };

Cible le bouton de défilement désigné par la valeur entre parenthèses. Ces valeurs peuvent être :
- + cible tous les boutons de défilement. utilise pour un formatage global.
- up cible le bouton qui fait défiler le contenu vers le haut (défilement vertical).
- right cible le bouton qui fait défiler le contenu vers la droite (défilement horizontal).
- down cible le bouton qui fait défiler le contenu vers le bas (défilement vertical).
- left cible le bouton qui fait défiler le contenu vers la gauche (défilement horizontal).
Enfin des valeurs logiques, dépendantes du mode d'écriture en fonction de la langue :
- block-start cible le bouton qui fait défiler le contenu dans vers le début des blocs.
- inline-end cible le bouton qui fait défiler le contenu vers la fin des lignes.
- block-start cible le bouton qui fait défiler le contenu vers la fin des blocs.
- inline-start cible le bouton qui fait défiler le contenu vers la début des lignes.
Et deux valeurs pas encore supportées par les navigateurs : ⚠.
- prev cible soit le bouton qui fait défiler vers le début de bloc, soit celui qui fait défiler vers le début en ligne, selon laquelle des deux dimensions possède le plus de pages. Si les deux dimensions sont de taille égale, sélectionne le bouton qui fait défiler vers le début de bloc.
- next : cible soit le bouton qui fait défiler vers la fin du bloc, soit celui qui fait défiler vers la fin des lignes, avec les mêmes règles qui pour prev.

Pseudo-élément `::scroll-button()` - Exemples d'utilisation.

Défilement horizontal

Nous reprenons ici l'exemple donnée en tête de cette page, mais avec un positionnement plus précis des boutons de navigation. La technique du positionnement par ancrage (voir anchor-name) est utilisée pour avoir toute liberté dans le placement des boutons.
Les boutons reçoivent également un curseur (pointer) pour indiquer qu'ils sont cliquables.

Cet exemple montre comment faire simplement un carrousel. Le code peut être presque copié-collé ; il faut juste adapter un peu les dimensions du conteneur défilant.

😇

😈

😎

😓

😨

😭

😱

Défilement vertical.

L'exemple symétrique, avec un défilement vertical. C'est juste le conteneur défilant qui n'est plus un flex-box et le positionnement des boutons est différent, mais avec les propriétés du positionnement par ancrage, c'est très facile.

😇

😈

😎

😓

😨

😭

😱

Mixer boutons et marqueurs;

Il est possible de mixer les boutons de défilement et les marqueurs, afin de faciliter encore le défilement, et de montrer où en est ce dernier. Il y a bien sûr plus de styles : si vous cliquez sur le bouton, vous ne verrez que les styles nécessaire au boutons de défilement et aux marqueurs, les autres styles (largeur, hauteur, taille de la police, etc.) sont définis par ailleurs.

😇

😈

😎

😓

😨

😭

😱

Pseudo-élément `::scroll-button()` - Compatibilité des navigateurs.

La compatibilité des navigateurs avec le pseudo-élément ::scroll-button() laisse encore à désirer. De grands navigateurs comme Firefox ou Safari ne le supporte toujours pas (2025).

Colonne 1

Prise en charge par les navigateurs du sélecteur par pseudo-élément ::scroll-button() qui cible les boutons de défilement.

Pseudo-élément
::scroll-button()

Estimation de la prise en charge globale.

60%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Safari sur IOS

Firefox

Chrome

Edge

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

Samsung Internet

KaiOS Browser

Safari

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Pseudo-élément `::scroll-button()` - Historique.

Module CSS - Débordements - Niveau 5

Introduction des boutons de défilement et du pseudo-élément ::scroll-button() pour les cibler.

17 Décembre 2024
Document de travail.