CSS scroll-behavior 属性值说明
| 值 | 描述 |
|---|---|
| auto | 元素之间存在突然的滚动行为。 |
| smooth | 元素之间存在平滑的滚动行为。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
CSS scroll-behavior 属性定义了滚动行为在可滚动框中应该是平滑的还是突然的。
此属性对用户执行的滚动没有影响。
在 body 元素上指定的 scroll-behavior 属性不会传播到视口。
应该为 html 元素指定它。
用户代理可以忽略此属性。
| 初始值 | auto |
|---|---|
| 应用于 | 滚动框。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSSOM视图模块（工作草案） |
| DOM 语法 | object.style.scrollbehavior =“smooth”; |
语法
scroll-behavior: auto | smooth | initial | inherit;
具有“auto”值的滚动行为属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
html {
scroll-behavior: auto;
}
#element1 {
height: 600px;
background-color: #ccc;
}
#element2 {
height: 600px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Scroll-behavior 属性示例</h2>
<div class="main" id="element1">
<h2>元素1</h2>
<a href="#element2">滚动到元素2</a>
</div>
<div class="main" id="element2">
<h2>元素2</h2>
<a href="#element1">滚动到元素1</a>
</div>
</body>
</html>
具有“smooth”值的滚动行为属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
html {
scroll-behavior: smooth;
}
#element1 {
height: 600px;
background-color: #ccc;
}
#element2 {
height: 600px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Scroll-behavior 属性示例</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>
日期：2020-06-02 22:14:45 来源：oir作者：oir