Propriété CSS scroll-behavior
La propriété CSS scroll-behavior spécifie si le comportement de défilement doit être brutal ou régulier dans une zone de défilement.
La propriété scroll-behavior spécifie sur l'élément body ne se propage pas à la fenêtre. Elle doit être spécifiée pour l'élément html.
Valeur initiale | auto |
Appliquée à | Boîtes de défilement. |
Héritée | Non. |
Animable | Non. |
Version | CSSOM View Module (Working Draft) |
Syntaxe DOM | object.style.scrollBehavior = "smooth"; |
Syntaxe
scroll-behavior: auto | smooth | initial | inherit;
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
html {
scroll-behavior: auto;
}
#element1 {
height: 600px;
background-color: #ccc;
}
#element2 {
height: 600px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Exemple de la propriété scroll-behavior</h2>
<div class="main" id="element1">
<h2>Élément 1</h2>
<a href="#element2">Cliquez pour défiler l'élément 2</a>
</div>
<div class="main" id="element2">
<h2>Élément 2</h2>
<a href="#element1">Cliquez pour défiler l'élément 1</a>
</div>
</body>
</html>
Voyons le comportement du parchemin lorsque la valeur "smooth" est définie:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
html {
scroll-behavior: smooth;
}
#element1 {
height: 600px;
background-color: #ccc;
}
#element2 {
height: 600px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Exemple de la propriété scroll-behavior</h2>
<div class="main" id="element1">
<h2>Élément 1</h2>
<a href="#element2">Cliquez pour défiler l'élément 2</a>
</div>
<div class="main" id="element2">
<h2>Élément 2</h2>
<a href="#element1">Cliquez pour défiler l'élément 1</a>
</div>
</body>
</html>
Valeurs
Valeur | Description |
---|---|
auto | Il y a un comportement de défilement brutal entre les éléments. |
smooth | Il y a un comportement de défilement lisse entre les éléments. |
initial | Fait utiliser la valeur initiale. |
inherit | Hérite la propriété de son élément parent. |
Support de Navigateurs
61.0+ | 36 | ✕ | 48.0+ |
Pratiquez vos connaissances
Qu'est-ce que le comportement de défilement (scroll behavior) en CSS?
Correcte!
Incorrecte!