CSS 从 scroll-snap-type 到 scroll-snap-*CSS 的 scroll-snap-type

1. `scroll-snap-type` 属性介绍

CSS 的 scroll-snap-type 属性是用于控制滚动时元素如何对齐的属性。它可以用来创建平滑的滚动效果，类似于手机应用或网站上的“滚动快照”效果，让内容在用户滚动时停在预设的位置。

1.1 语法

scroll-snap-type 属性的语法如下：

scroll-snap-type: [ none | x | y | block | inline | both ] [ mandatory | proximity ]?;

第一个值指定滚动轴向（x、y、block 或 inline），以及是否同时在两个轴向上（both）。
第二个值（可选）指定滚动停止的行为是强制性的（mandatory）还是基于接近度的（proximity）。

1.2 示例

假设我们有一个包含多个部分的页面，我们希望用户在滚动时，内容能够停在每个部分的顶部。以下是如何使用 scroll-snap-type 来实现这一效果的示例。

1.2.1 HTML 结构

<div class="scroll-container">
  <div class="section" id="section1">Section 1</div>
  <div class="section" id="section2">Section 2</div>
  <div class="section" id="section3">Section 3</div>
  <!-- 更多的 section 可以继续添加 -->
</div>

1.2.2 CSS 样式

.scroll-container {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  height: 100vh; /* 视口高度 */
}

.section {
  padding: 20px;
  text-align: center;
  min-height: 100vh; /* 确保每个 section 至少占满视口高度 */
}

/* 确保每个 section 都能正确地进行滚动对齐 */
.section {
  scroll-snap-align: start;
}

1.2.3 工作原理

.scroll-container 的 scroll-snap-type 属性设置为 y mandatory，这意味着滚动容器会在 .section 元素的顶部强制停止。
每个 .section 元素的 scroll-snap-align 属性设置为 start，这确保了滚动容器在该元素的顶部对齐。
当用户滚动 .scroll-container 时，浏览器会在每个 .section 的顶部自动“吸附”，创建一个平滑的滚动体验。

1.2.4 注意事项

确保滚动容器（在本例中是 .scroll-container）具有 overflow 属性设置为 scroll 或 auto。
确保滚动容器有一个确定的高度或最大高度，这样滚动行为才能被正确控制。
scroll-snap-type 需要与 scroll-snap-align 属性配合使用，后者定义了滚动停止的对齐方式。

1.2.5 浏览器兼容性

scroll-snap-type 是一个相对较新的CSS属性，大多数现代浏览器都支持它，但在一些旧版本的浏览器中可能不可用。在开发时，使用 Can I use 检查浏览器的兼容性。

2. `scroll-snap-*` 属性族介绍

2.1 `scroll-snap-type`

scroll-snap-type 控制滚动容器的滚动行为，其值可以是：

none：滚动容器内的滚动不会对齐任何滚动停靠点。
x：滚动停靠点将在水平方向上对齐。
y：滚动停靠点将在垂直方向上对齐。
block：滚动停靠点将在与其书写模式相对应的块方向上对齐。
inline：滚动停靠点将在与其书写模式相对应的行内方向上对齐。
both：滚动停靠点将在水平和垂直方向上对齐。

可选的第二个值指定滚动行为：

mandatory：滚动将强制停靠在滚动停靠点上。
proximity：滚动将停靠在最接近的滚动停靠点上。

2.2 `scroll-snap-align`

scroll-snap-align 属性用于指定滚动停靠点的对齐方式，其值可以是：

none：滚动停靠点不会被特别对齐。
start：滚动停靠点将对齐到滚动容器的起始边缘。
end：滚动停靠点将对齐到滚动容器的结束边缘。
center：滚动停靠点将尽可能居中对齐。

2.3 `scroll-snap-stop`

scroll-snap-stop 属性决定滚动行为是否应响应滚动停靠点。其值可以是：

normal：滚动行为正常，滚动停靠点不会强制停止滚动。
always：滚动将总是停止在滚动停靠点上。

2.3 示例代码

下面结合这些属性，创建一个完整的滚动快照示例。

2.3.1 HTML 结构

<div class="scroll-container">
  <section class="snap-item">Item 1</section>
  <section class="snap-item">Item 2</section>
  <section class="snap-item">Item 3</section>
  <!-- 更多内容 -->
</div>

2.3.2 CSS 样式

.scroll-container {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  height: 100vh; /* 视口高度 */
  /* 可选：添加内边距或边框以改善滚动体验 */
}

.snap-item {
  padding: 2rem;
  text-align: center;
  min-height: 100vh; /* 确保每个 section 至少占满视口高度 */
  scroll-snap-align: start; /* 滚动停靠点在容器的起始边缘对齐 */
}

/* 可选：添加过渡效果以改善滚动体验 */
.scroll-container {
  scroll-behavior: smooth;
}

2.3.2 滚动停靠点的布局

在上述代码中，.scroll-container 是滚动容器，它使用 scroll-snap-type: y mandatory 强制滚动停靠点在垂直方向上对齐。.snap-item 是滚动停靠点，使用 scroll-snap-align: start 确保每个部分在滚动时都停靠在其顶部。

2.3.3 滚动行为

当用户滚动时，由于 scroll-snap-type 设置为 mandatory，滚动行为会在每个 .snap-item 的顶部停止。如果设置为 proximity，则滚动会停在最接近用户滚动终点的 .snap-item 上。

3. 结论

scroll-snap-* 属性族提供了一种创建流畅、可预测的滚动体验的方法，特别适用于需要展示一系列屏幕大小内容的场景。通过合理使用这些属性，开发者可以提升用户界面的交互性，增强用户在浏览内容时的体验。然而，开发者应注意这些属性的浏览器兼容性，并在设计时考虑用户的滚动习惯。

CSS 从 scroll-snap-type 到 scroll-snap-*

1. scroll-snap-type 属性介绍