`Scroll-behavior` - Propriété CSS

scroll-behavior

Résumé des caractéristiques de la propriété `scroll-behavior`

Description rapide

Choisit entre un défilement brutal ou progressif de la page.

Statut

Standard

S'applique à

Éléments avec défilement.

Utilisable sur

HTML

Valeurs prédéfinies

smooth | auto

Pourcentages

Ne s'appliquent pas.

Valeur initiale

auto

Héritée par défaut

Non.

Type d'animation

Not animable : la propriété scroll-behavior ne peut pas être animée.

Module W3C

Module CSS - Débordements

Références (W3C)

CSS Overflow Module Level 3

Statut du document: WD (document de travail)

Schéma de la syntaxe de `scroll-behavior`.

Schéma syntaxique de la propriété scroll-behavior.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description de la propriété `scroll-behavior`.

scroll-behavior définit comment se fait le défilement lorsqu'un lien fait naviguer à l'intérieur même de la page (signet). Ce défilement peut être soit brutal, soit doux.

Cette propriété ne s'applique qu'au document lui-même, c'est à dire aux balises html ou body, ou aux éléments comportant des barres de défilement.

Valeurs pour `scroll-behavior`.

scroll-behavior: auto;

Valeur par défaut. Le document se décale brutalement vers la position demandée.
scroll-behavior: smooth;

Le document se décale de façon douce vers la position demandée.
scroll-behavior: initial; (auto) scroll-behavior: inherit; scroll-behavior: revert; scroll-behavior: revertLayer; scroll-behavior: unset;

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de `scroll-behavior`.

Pas d'animation possible pour scroll-behavior, ce qui se comprend dans la mesure où l'effet de cette propriété n'est visible que pendant un temps très bref.

Accéder à la propriété `scroll-behavior` par programme.

Avec Javascript, modifier la valeur de `scroll-behavior`.

Javascript accepte une syntaxe avec la notation en kebab-case, typique de CSS, et une autre avec la notation en camel-case. Voici un exemple de code pour chacune de ces syntaxes.


	let el = document.getElementById('id');
	el.style['scroll-behavior'] = 'smooth';
	// ou
	let el = document.getElementById('id');
	el.style.scrollBehavior = 'smooth';

Avec Javascript, lire la valeur de `scroll-behavior`.

Le code ci-dessous récupère la valeur de la propriété si celle-ci a été affectée directement à l'élément lui-même via son attribut style, et pas en passant par un sélecteur CSS.


	let el = document.getElementById('id');
	let value = el.style['scroll-behavior'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.scrollBehavior;

Avec Javascript, lire la valeur calculée de `scroll-behavior`.

La valeur calculée est celle qui résulte de la cascade des héritages. Si la propriété scroll-behavior n'a été définie ni sur l'élément, si sur aucun de ses parents, alors la valeur calculée est la valeur initiale : auto dans le cas de scroll-behavior.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('scroll-behavior');

Avec JQuery, modifier la valeur de `scroll-behavior`.


 $('#id').css('scroll-behavior', 'smooth');
 // ou
 $('#id').css('scrollBehavior', 'smooth');

Avec JQuery, lire la valeur calculée de `scroll-behavior`.


	let value = $('#id').css('scroll-behavior');

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété scroll-behavior et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée, ce qui ne fera pas de différence dans le cas de scroll-behavior.

Exemple interactif avec la propriété `scroll-behavior`.

Pour bien comprendre l'effet de la propriété scroll-behavior, choisissez d'abord une valeur ci-dessous, puis cliquez sur un des liens début de page ou fin de la page, ce qui va forcément nécessiter de faire défiler la page.

Vous pouvez aussi observer ce qui se passe sur un élément comportant des barres de défilement.

scroll-behavior :

smooth

auto

Sauter à la fin de ce texte.

L'effet de scroll-behavior est également visible sur les éléments dotés d'une barre de défilement (voir la propriété overflow pour la faire apparaître).
Cliquez sur les liens pour accéder au début ou à la fin de ce texte, et observez comment s'effectue le défilement de ce dernier, en fonction de la valeur donnée à scroll-behavior.

Remarque : le premier clic provoque en général un défilement dans l'élément lui-même, mais aussi un défilement de la page complète, ce qui gêne pour bien voir ce qui se passe.

Revenir au début de ce texte.

Compatibilité des navigateurs avec `scroll-behavior`.

La prise en charge de scroll-behavior est bonne, sauf sur Internet Explorer mais ce navigateur n'est pratiquement plus utilisé.

Colonne 1

Support par les navigateurs de la propriété scroll-behavior qui spécifie soit un scrolling brutal, soit progressif d'un endroit à l'autre de la page.

Propriété
scroll-behavior

Estimation de la prise en charge globale.

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

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

Caniuse

Histoire de la propriété `scroll-behavior`.

Module CSS - Débordements - Niveau 3

Concernant scroll-behavior. Première présentation de la propriété scroll-behavior.

18 Avril 2013
Document de travail.

Voir aussi, concernant la gestion des débordements et défilements.

Le module de spécification module CSS - Débordements regroupe tout ce qui concerne les débordements de contenu et les défilements (scroll bars). La propriété scroll-behavior, ainsi que les suivantes, sont décrites dans ce module.