编辑“︁HTML滚动捕获”︁（章节）

= HTML滚动捕获 =

'''HTML滚动捕获'''（Scroll Snapping）是一种CSS特性，允许开发者控制滚动容器的滚动行为，使其在滚动停止时自动“吸附”到特定的位置（如子元素的边界）。这项技术常用于创建流畅的滚动体验，特别是在轮播图、图片库或分页布局中。

== 介绍 ==
滚动捕获通过CSS属性<code>scroll-snap-type</code>和<code>scroll-snap-align</code>实现。它适用于水平或垂直滚动的容器，确保滚动结束时内容对齐到预定义的捕捉点，从而提升用户体验。

=== 核心概念 ===
* '''滚动容器'''：设置了<code>overflow: scroll</code>或<code>overflow-x/y: scroll</code>的元素。
* '''捕捉点'''：子元素通过<code>scroll-snap-align</code>定义的吸附位置（如起始、中心或结束边缘）。
* '''捕获类型'''：通过<code>scroll-snap-type</code>指定捕获是强制（mandatory）还是接近（proximity）生效。

== 基本用法 ==
以下是一个水平滚动的图片库示例，滚动时会自动吸附到每张图片的中心：

<syntaxhighlight lang="css">
.container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
  gap: 10px;
}

.item {
  scroll-snap-align: center;
  flex: 0 0 80%;
}
</syntaxhighlight>

<syntaxhighlight lang="html">
<div class="container">
  <div class="item"><img src="image1.jpg" alt="Image 1"></div>
  <div class="item"><img src="image2.jpg" alt="Image 2"></div>
  <div class="item"><img src="image3.jpg" alt="Image 3"></div>
</div>
</syntaxhighlight>

'''效果说明'''：用户滚动时，容器会自动停在某张图片的中心位置（因<code>scroll-snap-align: center</code>）。

== 高级配置 ==
=== 捕获严格性 ===
* <code>mandatory</code>：强制滚动结束时吸附到捕捉点。
* <code>proximity</code>：仅在滚动停止位置接近捕捉点时吸附。

=== 多轴捕获 ===
通过<code>scroll-snap-type: both mandatory</code>可实现水平和垂直同时捕获（如网格布局）。

== 实际案例 ==
'''案例：全屏分页幻灯片'''
<mermaid>
flowchart TD
  A[用户滑动屏幕] --> B{滚动停止位置}
  B -->|接近下一屏| C[吸附到下一屏]
  B -->|否则| D[保持当前屏]
</mermaid>

对应代码：
<syntaxhighlight lang="css">
.slides {
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow-y: scroll;
}

.slide {
  scroll-snap-align: start;
  height: 100vh;
}
</syntaxhighlight>

== 兼容性与注意事项 ==
* 主流浏览器（Chrome、Firefox、Safari）均支持滚动捕获。
* 避免在动态加载内容的场景中使用<code>mandatory</code>，可能导致意外吸附。
* 可通过JavaScript的<code>scrollend</code>事件进一步控制滚动行为。

== 数学原理 ==
滚动捕获的吸附逻辑可简化为最小距离计算：
<math>
\text{吸附位置} = \arg\min_{p \in P} |\text{滚动偏移量} - p|
</math>
其中<math>P</math>为所有捕捉点位置的集合。

== 总结 ==
HTML滚动捕获通过简单的CSS配置即可实现精准的滚动控制，适用于需要分页或对齐的场景。开发者应根据实际需求选择<code>mandatory</code>或<code>proximity</code>模式，并注意子元素的捕捉点定义。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML高级特性]]