移动端通过css scroll-snap 实现卡片吸附滑动，核心在于为容器设置 scroll-snap-type 并指定对齐方式，同时为子元素设置 scroll-snap-align。具体做法是：在父容器上添加 scroll-snap-type: x mandatory（横向）或 y mandatory（纵向），并在每个子卡片上设置 scroll-snap-align: start、center 或 end。这样用户滑动停止时，浏览器会自动将卡片吸附到指定位置，无需javascript介入。
如何配置容器与卡片的滚动对齐属性？
要实现基本的吸附效果，必须正确设置父容器的 scroll-snap-type 和子元素的 scroll-snap-align。scroll-snap-type 的值包括 none、x、y 和 block，配合 mandatory（强制吸附）或 proximity（近距吸附）。对于卡片轮播场景，通常使用 x mandatory 表示横向强制吸附。scroll-snap-align 则定义子元素相对于视口的位置，常用值为 start（左边缘对齐）、center（居中对齐）和 end（右边缘对齐）。若未设置 scroll-snap-align，默认值为 nearest，即吸附到最近的边界。
/* CSS 代码 */
.container {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
}
.card {
flex: 0 0 100%; /* 每张卡片占满容器宽度 */
scroll-snap-align: center; /* 滑动停止时居中 */
height: 300px;
background-color: #f0f0f0;
}
上述代码中，.container 设置了横向强制吸附，.card 设置为居中吸附。运行后，用户左右滑动卡片，停止时卡片会平滑地移动到视口中心位置。注意 -webkit-overflow-scrolling: touch 用于提升 iOS 设备的滚动体验，避免惯性滚动失效。
如何处理多行布局或垂直方向的吸附？
当卡片布局为多行（如瀑布流）或需要垂直方向吸附时，需调整 scroll-snap-type 的方向参数。scroll-snap-type: y mandatory 适用于垂直滚动场景，如长页面分段阅读。若布局为网格状，可使用 scroll-snap-type: both mandatory，同时支持横向和纵向吸附。此时，scroll-snap-align 仍作用于单个子元素，但需确保子元素尺寸固定，否则吸附行为可能不可预测。此外，scroll-padding 可用于调整吸附偏移量，例如在头部导航栏遮挡内容时，设置 scroll-padding-top: 60px 可避免内容被遮挡。
/* 垂直吸附示例 */
.vertical-container {
overflow-y: auto;
scroll-snap-type: y mandatory;
}
.section {
scroll-snap-align: start;
height: 100vh;
background-color: #e0e0e0;
}
该代码实现垂直方向的强制吸附，每个 .section 占据全屏高度，滑动停止时顶部对齐视口顶端。若需结合水平与垂直吸附，可将 scroll-snap-type 改为 both mandatory，并确保子元素尺寸一致。实际应用中，建议先测试单方向吸附，再逐步叠加复杂布局，以避免兼容性问题。
当卡片尺寸不一致时，吸附行为会发生什么变化？
若卡片尺寸不一致，scroll-snap-align 的吸附基准点仍基于子元素自身的边界，而非视口中心。例如，若某张卡片宽度为 50%，其他为 100%，设置 scroll-snap-align: center 时，小卡片会以其自身中心对齐视口中心，可能导致视觉错位。此时，可通过 JavaScript 动态计算偏移量，或使用 scroll-padding 微调对齐位置。另一种方案是统一卡片尺寸，或在 CSS 中使用 aspect-ratio 保持比例一致。若无法统一尺寸，建议在 scroll-snap-align 中使用 start 或 end，以减少对齐误差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
