滚动行为 | scroll-behavior (Object Model View) - CSS 中文开发手册 - Break易站

??CSS 中文开发手册

滚动行为 | scroll-behavior (Object Model View) - CSS 中文开发手册

scroll-behavior由于导航或CSSOM滚动API，滚动发生时，CSS属性指定滚动框的滚动行为。任何其他滚动条，例如由用户执行的滚动条，都不受此属性的影响。在根元素上指定此属性时，它将应用于视口。

用户代理可能忽略此属性。

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;

语法

取值

auto滚动框会立即滚动。smooth滚动框在用户代理定义的时间段内使用用户代理定义的定时功能以平滑的方式滚动。用户代理应该遵循平台惯例（如果有的话）。

形式语法

auto | smooth

例

HTML

<nav>
? <a href="#page-1">1</a>
? <a href="#page-2">2</a>
? <a href="#page-3">3</a>
</nav>
<scroll-container>
? <scroll-page id="page-1">1</scroll-page>
? <scroll-page id="page-2">2</scroll-page>
? <scroll-page id="page-3">3</scroll-page>
</scroll-container>

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 {
? display: block;
? 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 中文开发手册