scroll-behavior: smooth;
https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior
当由于导航或者CSSOM滚动api产生滚动时,CSS属性 scroll-behavior
为一个滚动框指定滚动行为,其他任何的滚动,例如那些由于用户行为而产生的滚动,不受这个属性的影响。在根元素中指定这个属性时,它反而适用于视窗。
用户代理可能会忽略这个属性。
初始值 | auto |
---|---|
适用元素 | scrolling boxes |
是否是继承属性 | 否 |
适用媒体 | visual |
计算值 | as specified |
Animation type | discrete |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
/* 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;
}