scroll-behavior
CSS scroll-behavior Property
The CSS scroll-behavior property defines whether the scroll behavior should be smooth or abrupt within a scrollable box.
This property does not have an effect on scrolls performed by the user. The scroll-behavior property specified on the body element will not propagate to the viewport. It should be specified for the html element.
User agents can ignore this property.
| 类目 | 类目 |
|---|---|
| Initial Value | auto |
| Applies to | Scrolling boxes. |
| Inherited | No. |
| Animatable | No. |
| Version | CSSOM View Module (Working Draft) |
| DOM Syntax | object.style.scrollBehavior = “smooth”; |
Syntax
Syntax
scroll-behavior: auto | smooth | initial | inherit;
Example of the scroll-behavior property with the “auto” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
scroll-behavior: auto;
}
#element1 {
height: 600px;
background-color: #ccc;
}
#element2 {
height: 600px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Scroll-behavior property example</h2>
<div class="main" id="element1">
<h2>Element 1</h2>
<a href="#element2">Click to scroll to Element 2</a>
</div>
<div class="main" id="element2">
<h2>Element 2</h2>
<a href="#element1">Click to scroll to Element 1</a>
</div>
</body>
</html>
Example of the scroll-behavior property with the “smooth” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
scroll-behavior: smooth;
}
#element1 {
height: 600px;
background-color: #ccc;
}
#element2 {
height: 600px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Scroll-behavior property example</h2>
<div class="main" id="element1">
<h2>Element 1</h2>
<a href="#element2">Click to scroll to Element 2</a>
</div>
<div class="main" id="element2">
<h2>Element 2</h2>
<a href="#element1">Click to scroll to Element 1</a>
</div>
</body>
</html>
Values
Values
| Value | Description |
|---|---|
| auto | There is a abrupt scroll behavior between the elements. |
| smooth | There is a smooth scroll behavior between the elements. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |