Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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
Valeurs prédéfinies
auto | smooth
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non
Type d'animation
Not animatable : la propriété scroll-behavior ne peut pas être animée.
Module W3C
Module CSS - Débordements
Références (W3C)
Statut du document:: WD (document de travail)

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; scroll-behavior: inherit; scroll-behavior: revert; scroll-behavior: revert-layer; scroll-behavior: unset;

    La valeur initiale est : auto.

Animation de la propriété 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.

Simulateur.

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 aéussi observer ce qui se passe sur un élément comportant des barres de défilement.

scroll-behavior :

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 e 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.

Prise en charge par les navigateurs (compatibilité).

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

1
scroll-behavior
Estimation de la prise en charge en pourcentage du parc actuel.
92%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que scroll-behavior.

Les spécifications CSS éditées par le W3C sont organisées en modules. scroll-behavior fait partie du Module CSS - Débordements (CSS Overflow Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Gère l'affichage d'une marque de suite à la fin d'un élément lorsque le contenu déborde de ce dernier.
Gestion des débordements, lorsque le contenu est trop grand pour les dimensions imposées à l'élément.
Gestion des débordements dans la direction secondaire.
Définit la marge de débordement, lorsque le contenu est plus grand que l'élément.
Gestion des débordements dans la direction principale.
Gestion du débordement dans le sens horizontal.
Gestion du débordement dans le sens vertical.
Réserve ou non la gouttière pour une barre de défilement.
Définit l'indicateur de débordement du texte.