CSS 滚动吸附
Scroll Snap 的核心概念
Scroll Snap 是 CSS 提供的一种让滚动停止时自动"吸附"到指定位置的机制。常见应用包括图片轮播、画廊浏览、标签页切换等。
理解 Scroll Snap 的关键是理解两个核心属性：scroll-snap-type（定义容器行为）和 scroll-snap-align（定义元素吸附位置）。
面试定位：Scroll Snap 是较新的 CSS 特性（2016+），不是高频面试考点，但它展示了 CSS 在交互体验上的能力。
scroll-snap-type
值和含义
.container {
/* 方向：x（水平）、y（垂直）、both（两个方向） */
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: both;
/* 严格度：mandatory（强制吸附）、proximity（接近时吸附） */
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
/* 简写 */
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;
}
mandatory vs proximity
/* mandatory：滚动停止后必须吸附到最近的快照位置 */
.mandatory {
scroll-snap-type: x mandatory;
}
/* proximity：只有滚动停止位置接近快照位置时才吸附 */
.proximity {
scroll-snap-type: x proximity;
}
scroll-snap-align
值和含义
.item {
/* start：吸附到容器的起始边缘（默认） */
scroll-snap-align: start;
/* end：吸附到容器的结束边缘 */
scroll-snap-align: end;
/* center：吸附到容器的中心 */
scroll-snap-align: center;
/* none：不吸附 */
scroll-snap-align: none;
}
scroll-padding
.container {
/* 为滚动容器添加内边距，影响吸附计算 */
scroll-padding: 20px; /* 所有方向 */
scroll-padding-top: 10px; /* 单独设置 */
scroll-padding-right: 20px;
scroll-padding-bottom: 30px;
scroll-padding-left: 40px;
}
实战：完整轮播组件
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
gap: 16px;
padding: 0 16px;
scroll-padding: 16px;
}
.carousel-item {
flex: 0 0 calc(100% - 32px); /* 每屏显示一个 */
scroll-snap-align: start;
height: 300px;
background: #f0f0f0;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
/* 隐藏滚动条 */
.carousel::-webkit-scrollbar {
display: none;
}
.carousel {
-ms-overflow-style: none;
scrollbar-width: none;
}