试一试
scroll-behavior: auto;
scroll-behavior: smooth;
<section id="default-example">
<div class="container">
<p class="nav">
Scroll to:
<a href="#pageA">A</a>
<a href="#pageB">B</a>
<a href="#pageC">C</a>
</p>
<scroll-container id="example-element">
<scroll-page id="pageA">A</scroll-page>
<scroll-page id="pageB">B</scroll-page>
<scroll-page id="pageC">C</scroll-page>
</scroll-container>
</div>
</section>
.container {
flex-direction: column;
}
.nav a {
color: #009e5f;
}
scroll-container {
border: 1px solid black;
display: block;
height: 200px;
overflow-y: scroll;
width: 200px;
}
scroll-page {
align-items: center;
display: flex;
font-size: 5em;
height: 100%;
justify-content: center;
}
请注意，此属性不会影响其他滚动，例如用户执行的滚动。当此属性在根元素上指定时，它适用于视口。在 body 元素上指定的此属性不会传播到视口。
用户代理可以忽略此属性。
语法
css
/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;
/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: revert;
scroll-behavior: revert-layer;
scroll-behavior: unset;
scroll-behavior 属性指定为下面列出的关键字值之一。
值
正式定义
正式语法
scroll-behavior =
auto |
smooth
示例
设置平滑滚动行为
HTML
html
<nav>
<a href="#page-1">1</a>
<a href="#page-2">2</a>
<a href="#page-3">3</a>
</nav>
<div class="scroll-container">
<div class="scroll-page" id="page-1">1</div>
<div class="scroll-page" id="page-2">2</div>
<div class="scroll-page" id="page-3">3</div>
</div>
CSS
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 {
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 溢出模块第 3 级 # 平滑滚动 |
浏览器兼容性
加载中…