Style scrollBehavior 属性 详解
css3基础 2023-07-30 03:09:19小码哥的IT人生shichen
Style scrollBehavior 属性
实例
向页面添加平滑的滚动效果：
document.documentElement.style.scrollBehavior = "smooth";
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#section1 {
height: 600px;
background-color: pink;
}
#section2 {
height: 600px;
background-color: yellow;
}
</style>
</head>
<body>
<h1>平滑滚动</h1>
<p>请在点击“应用平滑滚动效果”按钮之前单击粉色和黄色 DIV 内的链接 - 以查看应用平滑滚动效果前后的效果。</p>
<p>注释：IE 11（及更早版本）和 Safari 13（及更早版本）不支持 scrollBehavior 属性。</p>
<button onclick="myFunction()">应用平滑滚动效果</button>
<div class="main" id="section1">
<h2>Section 1</h2>
<a href="#section2">点击我转到下面的第 2 部分</a>
</div>
<div class="main" id="section2">
<h2>Section 2</h2>
<a href="#section1">点击我转到上面的第 1 部分</a>
</div>
<script>
function myFunction() {
document.documentElement.style.scrollBehavior = "smooth";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
语法
object.style.scrollBehavior = "auto|smooth|initial|inherit"
属性值
| 值 | 描述 |
|---|---|
| auto | 默认。允许在滚动框内的元素之间直接跳转的“滚动效果”。 |
| smooth | 允许滚动框内元素之间的平滑动画的“滚动效果”。 |
| initial | 将此属性设置为其默认值。请参阅 initial。 |
| inherit | 从其父元素继承此属性。请参阅 inherit。 |
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 61.0 | 79.0 | 36.0 | 14.0 | 48.0 |
