滚动行为 | scroll-behavior
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 |
|---|---|
适用于 | 滚动框 |
遗传 | 没有 |
媒体 | visual |
计算值 | 作为指定 |
动画类型 | 离散的 |
规范的顺序 | 形式语法定义的独特的非模糊顺序 |
语法
取值
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;
}输出
规范
Specification | Status | Comment |
|---|---|---|
CSS Object Model (CSSOM) View ModuleThe definition of 'scroll-behavior' in that specification. | Working Draft | Initial specification |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support | 611 | 36 (36) | No support | (Yes)1 | No support |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | No support | 36 (36) | No support | No support | No support |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
