C06 滚动吸附与滚动行为

摘要：滚动相关属性分三组：容器上的 scroll-snap-type 决定吸附轴与严格度，子项上的 scroll-snap-align 决定对齐位置，scroll-margin 与 scroll-padding 留出被顶栏遮挡的空间。overscroll-behavior 阻止滚动链传播，scroll-behavior 控制锚点跳转是否平滑。本文给出轮播、分段列表与固定顶栏三类场景的完整写法与四项兼容性取舍。
关键词：滚动吸附，scroll-snap，overscroll-behavior，scroll-margin，滚动链

所属：frontend/css / C-高级 ｜ 上一篇：C05-CSS工程化 ｜ 下一篇：C07-表单控件与原生控件 ｜ 返回：C00-总结

1 引言

手写的轮播与分段列表常见三类问题：松手后停在两张之间、锚点跳转被固定顶栏挡住标题、弹层内滚动到底后带动整页继续滚。三者都可用滚动属性解决，不需要 JavaScript。

本文给出滚动吸附与滚动行为的完整写法。范围见表 1-1。

项	本文覆盖	本文不覆盖
吸附	scroll-snap-type、scroll-snap-align、scroll-snap-stop	滚动驱动动画 animation-timeline
留白	scroll-margin、scroll-padding、scroll-margin-block-start	自定义滚动条样式
链与平滑	overscroll-behavior、scroll-behavior	触控手势与物理滚动细节

表 1-1 本文覆盖范围

2 预备知识

项	要求	核对方式
环境	本地服务器可用	浏览器能打开 localhost
文件	css-practice/scroll.html	编码 UTF-8
浏览器	Chrome 130+	支持 scroll-snap-stop
前置	A05、B03	溢出与定位已掌握

表 2-1 环境与前置要求

3 原理与实现

3.1 吸附发生在滚动容器与其子项之间

吸附类型声明在滚动容器上，对齐方式声明在子项上，两者必须配合，如图 3-1 所示。

flowchart TD
    A["滚动容器 overflow-x: auto"] --> B["scroll-snap-type: x mandatory"]
    C["子项 .slide"] --> D["scroll-snap-align: center"]
    B --> E["滚动停止时按就近原则对齐到吸附点"]
    D --> E
    E --> F{"mandatory 还是 proximity"}
    F -->|mandatory| G["必然停在某个吸附点"]
    F -->|proximity| H["仅在接近时才吸附"]

图 3-1 容器与子项各自声明一半配置

图上可见：只在容器上写 scroll-snap-type 不会有任何效果，子项缺少 scroll-snap-align 是最常见的原因。

3.2 完整实现

<!-- 运行环境：Chrome 130+；css-practice/scroll.html -->
<header class="topbar">固定顶栏</header>
<main>
  <nav class="tabs">
    <a href="#s1">第一段</a>
    <a href="#s2">第二段</a>
  </nav>

  <ul class="carousel">
    <li class="slide">A</li>
    <li class="slide">B</li>
    <li class="slide">C</li>
  </ul>

  <section class="panel">
    <h2 id="s1">第一段</h2>
    <p>内容…</p>
    <h2 id="s2">第二段</h2>
    <p>内容…</p>
  </section>
</main>

/* 运行环境：Chrome 130+；css-practice/scroll.css */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  background: #0f172a;
  color: #f8fafc;
  padding-block: 0.75rem;
}

/* 1 横向轮播：容器与子项各声明一半 */
.carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;        /* 子项留出边距后再对齐 */
  overscroll-behavior-x: contain;      /* 滚到边界不带动整页 */
  padding-inline: 1rem;
}

.slide {
  flex: 0 0 70%;
  scroll-snap-align: center;
  scroll-snap-stop: always;            /* 禁止一次滑过多张 */
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: #e2e8f0;
  border-radius: 0.75rem;
}

/* 2 锚点跳转不被顶栏遮挡 */
.panel h2 { scroll-margin-block-start: 4.5rem; }

/* 3 弹层内滚动不冒泡（配合 JS 给 body 加类） */
body.modal-open { overflow: hidden; overscroll-behavior: none; }

滚动属性与场景对照见表 3-1。

属性	声明位置	取值	解决的问题
scroll-snap-type	滚动容器	x/y/both + mandatory/proximity	松手后停在两页之间
scroll-snap-align	子项	start/center/end	对齐位置
scroll-snap-stop	子项	normal/always	快速滑动跨过多项
scroll-padding	滚动容器	长度	对齐时的容器内边距
scroll-margin	目标元素	长度	锚点跳转被固定头部遮挡
overscroll-behavior	滚动容器	auto/contain/none	滚动链、下拉刷新冲突
scroll-behavior	滚动容器	auto/smooth	锚点跳转是否平滑

表 3-1 七项滚动属性与对应场景

overscroll-behavior 的两个方向见表 3-2。

取值	滚到边界时	是否阻止下拉刷新	典型场景
auto	继续带动祖先滚动	否	默认行为
contain	边界内出现回弹，不带动祖先	保留本容器刷新	轮播、侧栏列表
none	不带动祖先，也无回弹	阻止	弹层、全屏抽屉

表 3-2 overscroll-behavior 取值差异

4 验证与讨论

1. 拖动轮播并松手，确认总是停在某一张的中心，验证图 3-1 的 mandatory 分支。
2. 把 mandatory 改为 proximity，在中途松手，确认只有接近吸附点时才对齐。
3. 点击「第二段」，确认标题未被顶栏遮挡；删除 scroll-margin-block-start 后再试，确认标题被遮住。
4. 在弹层内滚到底部继续滚动，确认页面不再跟随滚动。

检查项	预期结果	说明
吸附生效	松手后停在子项中心	表 3-1
单张停留	快速滑动不跨过多张	scroll-snap-stop
锚点留白	标题完整可见	scroll-margin
链条阻断	轮播到边界时页面不动	表 3-2
动效偏好	开启减少动效时跳转瞬时完成	3.2 节媒体查询

表 4-1 五项验收与减少动效降级

讨论与局限。 scroll-snap-type: mandatory 在内容长于视口时会限制用户停在段落中间，正文列表用 proximity 更稳。另，scroll-behavior: smooth 会覆盖系统减少动效偏好，必须按 C04 的做法加媒体查询兜底。

5 常见问题

现象	原因	处理
吸附完全没效果	子项缺 scroll-snap-align	容器与子项各补一半声明
一次滑过好几张	未设 scroll-snap-stop	子项加 scroll-snap-stop: always
锚点跳转后标题被顶栏挡住	未给目标元素留滚动外边距	scroll-margin-block-start 取顶栏高度
弹层滚动带动整页	祖先未被隔离	弹层加 overscroll-behavior: contain
平滑滚动引发不适	未处理动效偏好	在 prefers-reduced-motion 下改为 auto
内容被强制吸附无法停在中段	正文用 mandatory	正文改 proximity

表 5-1 滚动相关的六类问题

6 结论

序号	结论	依据
1	吸附配置分写在容器与子项上，缺一不可	图 3-1
2	锚点目标一律配 scroll-margin	表 3-1
3	弹层与轮播加 overscroll-behavior 阻断链	表 3-2
4	平滑滚动需为减少动效提供降级	表 4-1

表 6-1 结论汇总

• 上一篇：C05-CSS工程化
• 下一篇：C07-表单控件与原生控件
• 返回：C00-总结 ｜ 科目 README

参考文献

[1] MDN Web Docs · CSS 滚动吸附，https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_scroll_snap（访问于 2026-10-31）
[2] MDN Web Docs · overscroll-behavior，https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior（访问于 2026-10-31）