CSS参考手册
项目模型 | Object Model View
滚动行为 | 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 |
项目模型 | Object Model View相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。