CSS 滚动优化 scroll-behavior / scroll-snap-

滚动过渡

当用户手动导航或者 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