scroll-behavior - Propriété CSS
Résumé des caractéristiques de la propriété scroll-behavior
auto
| smooth
auto
scroll-behavior
ne peut pas être animée.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.
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.
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é.
scroll-behavior
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.