滚动过渡
当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,控制滚动容器的滚动行为
给可滚动容器添加scroll-behavior: smooth
,实现平滑滚动
{
scroll-behavior: smooth;
}
控制滚动结束位置
scroll-snap-type
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]
设置在父级滚动容器中
- x:捕捉X轴方向上的滚动
- y:捕捉Y轴方向上的滚动
- both:同时捕捉x、y 轴方向上的滚动
- mandatory:滚动结束后元素停在指定位置
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
ul {
scroll-snap-type: x mandatory;
}
li {
scroll-snap-align: center;
}
控制X轴的滚动:scroll-snap-type: x mandatory
控制Y轴的滚动:scroll-snap-type: y mandatory
同时控制X、Y轴的滚动:scroll-snap-type: both mandatory
scroll-snap-align
scroll-snap-align: start | center | end
设置在滚动容器子元素中
控制 当前聚焦的滚动元素 在滚动方向上 相对父容器的对齐方式
相对于父容器顶部对齐:scroll-snap-align: start
相对于父容器中心对齐:scroll-snap-align: center
相对于父容器底部对齐:scroll-snap-align: end
scroll-padding
设置在滚动容器中
与scroll-snap-align作用一样,用于精准控制,类似padding
<ul class="snap">
<li>1</li>
<li>2</li>
<li>3</li>
...
</ul>
.snap {
overflow-x: auto;
scroll-snap-type: y mandatory;
scroll-padding-top: 30px;
}
li {
scroll-snap-align: start;
}
scroll-margin
设置在滚动容器子元素中
与scroll-snap-align作用一样,用于精准控制,类似margin