两个角色：滚动容器写 scroll-snap-type，子元素写 scroll-snap-align。容器滚动结束时，浏览器会自动把最近的一个对齐点（start/center/end）吸附到视口对应位置。mandatory 表示强制吸附，proximity 表示离得近才吸。
相比 JS 监听滚动自己算位置，CSS 方案自带惯性动画、性能更好，也不依赖滚动结束事件（滚轮、触屏都兼容）。最适合图片画廊、手风琴卡片和移动端整屏翻页。
<style> .bar { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 10px; } .bar > div { scroll-snap-align: center; flex: 0 0 200px; height: 110px; background: linear-gradient(135deg,#4a9eff,#39c5cf); border-radius: 10px; color: #fff; } </style> <div class="bar"> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div> </div>