滚动行为 | scroll-behavior (Object Model View) - CSS 中文开发手册 - Break易站
2021-01-27 05:15
滚动行为 | 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 |
|---|---|
| 适用于 | 滚动框 |
| 遗传 | 没有 |
| 媒体 | visual |
| 计算值 | 作为指定 |
| 动画类型 | 离散的 |
| 规范的顺序 | 形式语法定义的独特的非模糊顺序 |
语法
取值
auto滚动框会立即滚动。smooth滚动框在用户代理定义的时间段内使用用户代理定义的定时功能以平滑的方式滚动。用户代理应该遵循平台惯例（如果有的话）。
形式语法
auto | smooth
例
HTML
? 1 ?2 ?3
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 |
上一篇：缩放背景图像 | CSS Background and Borders: Scaling background images (Backgrounds & Borders) - CSS 中文开
文章标题：滚动行为 | scroll-behavior (Object Model View) - CSS 中文开发手册 - Break易站
文章链接：http://soscw.com/index.php/essay/47610.html