scroll-behavior
**scroll-behavior
** CSS 属性设置当滚动由导航或 CSSOM 滚动 API 触发时,滚动框的行为。
试一试
请注意,任何其他滚动(例如用户执行的滚动)都不会受到此属性的影响。当此属性在根元素上指定时,它将应用于视口。在 body
元素上指定的此属性 *不会* 传播到视口。
用户代理可以忽略此属性。
语法
css
/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;
/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: revert;
scroll-behavior: revert-layer;
scroll-behavior: unset;
scroll-behavior
属性指定为下面列出的关键字值之一。
值
正式定义
正式语法
scroll-behavior =
auto |
smooth
示例
设置平滑滚动行为
HTML
html
<nav>
<a href="#page-1">1</a>
<a href="#page-2">2</a>
<a href="#page-3">3</a>
</nav>
<div class="scroll-container">
<div class="scroll-page" id="page-1">1</div>
<div class="scroll-page" id="page-2">2</div>
<div class="scroll-page" id="page-3">3</div>
</div>
CSS
css
a {
display: inline-block;
width: 50px;
text-decoration: none;
}
nav,
.scroll-container {
display: block;
margin: 0 auto;
text-align: center;
}
nav {
width: 339px;
padding: 5px;
border: 1px solid black;
}
.scroll-container {
width: 350px;
height: 200px;
overflow-y: scroll;
scroll-behavior: smooth;
}
.scroll-page {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 5em;
}
结果
规范
规范 |
---|
CSS 溢出模块级别 3 # 平滑滚动 |
浏览器兼容性
BCD 表格仅在浏览器中加载