滚动叙事

滚动时，页面可以怎么讲故事

八种常见但不容易叫出名字的滚动手法。每个活样本都关在自己的设备画框里，带上准确名称、适用场景、可复制配方和对 AI 的说法。

页面滚动不会驱动样本；请把指针移进画框，在画框内部滚动。

视差

Parallax

视差滚动景深parallax scrolling

活样本

↕ 在框内滚动

现场笔记 04

轻轻画出远近。

阅读层正常滚动，只有装饰背景在它身后缓慢漂移。

更安静的地平线

景深不抢注意力

文案始终可读

何时用

用于 hero 或封面制造克制的景深，同时让正文阅读层保持稳定。

可复制配方

const containerRef = useRef<HTMLDivElement>(null);
const reducedMotion = useReducedMotion();
const { scrollYProgress } = useScroll({ container: containerRef });
const backgroundY = useTransform(
  scrollYProgress,
  [0, 1],
  ["0%", "30%"],
);

return (
  <motion.div style={reducedMotion ? undefined : { y: backgroundY }} />
);

对 AI 这样说

请使用克制的视差滚动（Parallax Scrolling）：只让 hero 的装饰背景层以约前景 0.35 倍的速度反向位移，标题、按钮和正文保持在正常文档流；桌面端位移幅度控制在容器高度的 30% 内，并为 reduced-motion 与移动端提供静态背景。 FORBIDDEN：整页所有元素都做视差、正文跟着漂移、超过 30% 的大幅位移、移动端强制开启、用缩放或 blur 伪装景深导致眩晕。

钉住

Pinned

粘性定位吸顶stickypin

活样本

↕ 在框内滚动

第二章

留下来的标题。

参考点保持原位，解释内容从它身旁经过。

说清这一刻

每个章节只承担一个明确任务。

留住参考点

让视觉锚点一直留在视野中。

让细节经过

补充说明仍在正常文档流里。

自然释放

钉住效果随所属章节一起结束。

窄屏堆叠

小屏回到单列，但标题仍在局部钉住。

何时用

让章节标题或参考图常驻，同时相关说明在旁边或下方逐段滚过。

可复制配方

.chapter {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 2rem;
}

.chapter-title {
  position: sticky;
  top: 1rem;
  align-self: start;
}

对 AI 这样说

请使用钉住式章节（Pinned / Sticky Section）：把章节标题面板放在双列布局左侧，用 position: sticky 和明确的 top 偏移固定在局部滚动容器顶部；右侧内容保持正常文档流，滚过标题后再自然释放，移动端改为上下布局。 FORBIDDEN：用 fixed 脱离局部容器、整页永久吸顶、左右两列都钉住、隐藏正文滚动条、移动端保留拥挤双列。

逐段揭示

Scroll Reveal

滚动淡入进入视口动画reveal on scrollfade-in-up

活样本

↕ 在框内滚动

观察

从读者肉眼能看到的事物开始。

命名

给这个行为贴上准确的手法名称。

解释

说明什么时候值得使用这种手法。

约束

定下动效、范围与无障碍边界。

复制

带走另一位构建者也能使用的话。

应用

复现思路，而不是照搬表面。

何时用

用于长页逐段呈现，让读者滚到哪里就看到哪里，而不是一次塞满视野。

可复制配方

const containerRef = useRef<HTMLDivElement>(null);
const reducedMotion = useReducedMotion();

<motion.section
  initial={reducedMotion ? false : { opacity: 0, y: 16 }}
  whileInView={reducedMotion ? undefined : { opacity: 1, y: 0 }}
  viewport={{ root: containerRef, amount: 0.4, once: false }}
  transition={{ duration: 0.24, ease: EASE_OUT }}
/>

对 AI 这样说

请使用逐段揭示（Scroll Reveal / Fade-in-up）：每个内容块进入它所属滚动容器约 40% 可见区域时，从 opacity 0、translateY(16px) 在 240ms 内落到原位；离开后允许再次触发，reduced-motion 时直接显示最终态。 FORBIDDEN：监听整个 window、超过 20px 的飞入、同时使用 blur/旋转/弹跳、长串延迟导致内容不可读、reduced-motion 下仍保留位移。

滚动进度

Scroll Progress

阅读进度进度条scroll progressreading indicator

活样本

↕ 在框内滚动

阅读笔记 · 约 6 分钟

进度属于读者。

为一条漫长但有终点的路径，留下一枚安静信号。

当读者已经进入一段有明确终点的内容时，进度提示最有价值。

进度条与文章属于同一个视口，它的意义不应受页面上下方的外壳影响。

用 scaleX 更新可以留在合成层，避免每一帧都重新测量宽度。

这段运动传达的是位置，所以在减少装饰性动效时仍然有用。

读到最后一行时，进度条应与局部滚动容器同时准确抵达终点。

何时用

用于长文、文档或局部流程，持续告诉读者已经读到哪里、还剩多少。

可复制配方

const containerRef = useRef<HTMLDivElement>(null);
const { scrollYProgress } = useScroll({ container: containerRef });

<motion.div
  style={{ scaleX: scrollYProgress, transformOrigin: "left" }}
  className="h-1"
/>

对 AI 这样说

请添加局部滚动进度（Scroll Progress / Reading Indicator）：在阅读容器顶部放一条 3–4px 的细进度条，以容器自身的 scrollYProgress 驱动 scaleX 0→1，并把 transform-origin 固定在 left；进度条保持可见但不遮正文。 FORBIDDEN：绑定 window 进度、用 width 触发布局重排、显示虚假百分比、把进度条做成抢眼的大色块、到达底部前提前填满。

横向滚动

Horizontal Scroll

横滚卧式画廊horizontal scrollscroll-jacking gallery

活样本

↕ 在框内滚动

阶段 1

画框

先划出一个有边界的视口。

阶段 2

钉住

让画廊舞台保持原位。

阶段 3

映射

把纵向进度转换成 x。

阶段 4

横移

确保每张卡都能抵达。

阶段 5

释放

最后回到正常文档流。

何时用

用于作品集、时间线或步骤序列，把纵向滚动转换成有节奏的横向叙事。

可复制配方

const containerRef = useRef<HTMLDivElement>(null);
const reducedMotion = useReducedMotion();
const { scrollYProgress } = useScroll({ container: containerRef });
const x = useTransform(scrollYProgress, [0, 1], ["0%", "-62%"]);

<div ref={containerRef} className="h-[380px] overflow-y-auto">
  <div className="h-[1000px]">
    <div className={reducedMotion ? "sticky top-0 overflow-x-auto" : "sticky top-0 overflow-hidden"}>
      <motion.div
        style={reducedMotion ? undefined : { x }}
        className="flex w-max"
      />
    </div>
  </div>
</div>

对 AI 这样说

请使用纵滚驱动横滚（Horizontal Scroll Gallery）：在一个有明确高度的局部滚动容器中，把画廊视口 sticky 在顶部，用容器自身 0→1 的纵向进度将卡片轨道从 x=0 映射到约 -62%；首尾卡必须完整可达，reduced-motion 时退化为原生横向滚动。 FORBIDDEN：劫持整页滚动、吞掉触控板横向手势、让正文一起横移、首尾卡被裁掉、reduced-motion 下继续自动横移。

吸附滚动

Scroll Snap

分页吸附整屏翻页scroll snappaginated

活样本

↕ 在框内滚动

01 / 04

抵达

一次手势，落在一个完整观点上。

02 / 04

聚焦

画框先落稳，阅读再开始。

03 / 04

前进

底层依然由原生滚动完成。

04 / 04

收尾

最后一屏也准确落位。

何时用

用于短篇产品故事或演示式序列，让一次滚动手势稳定落在一个完整面板。

可复制配方

.viewport {
  height: 380px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
}

.panel {
  min-height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

对 AI 这样说

请使用纵向吸附滚动（Scroll Snap / Paginated Panels）：局部容器设为 scroll-snap-type: y mandatory，每个面板至少占满容器高度并以 scroll-snap-align: start 对齐；使用 overscroll-behavior: contain，把吸附限制在该设备画框内。 FORBIDDEN：把 body 设为 mandatory snap、面板高度不一致导致半截停留、隐藏滚动条、嵌套多层强制吸附、用 JavaScript 反复纠正原生滚动。

缩放入场

Scroll Zoom

缩放揭示焦点放大zoom on scrollscale-in

活样本

↕ 在框内滚动

焦点对象

让一个时刻成为中心。

缩放只到 1。卡片平稳抵达，而不是向读者猛扑过来。

何时用

让关键视觉或产品时刻在抵达叙事中心时获得焦点，适合单个重点内容登场。

可复制配方

const containerRef = useRef<HTMLDivElement>(null);
const targetRef = useRef<HTMLDivElement>(null);
const reducedMotion = useReducedMotion();
const { scrollYProgress } = useScroll({
  container: containerRef,
  target: targetRef,
  offset: ["start end", "center center"],
});
const scale = useTransform(scrollYProgress, [0, 1], [0.86, 1]);
const opacity = useTransform(scrollYProgress, [0, 1], [0.4, 1]);

return (
  <div ref={containerRef} className="h-[380px] overflow-y-auto">
    <motion.div
      ref={targetRef}
      style={reducedMotion ? { scale: 1, opacity: 1 } : { scale, opacity }}
    />
  </div>
);

对 AI 这样说

请使用缩放入场（Scroll Zoom / Scale-in）：当主卡从局部滚动容器底部进入并靠近中心时，将 scale 从 0.86 映射到 1、opacity 从 0.4 映射到 1；缩放中心稳定，周围内容不位移，reduced-motion 直接显示 scale 1。 FORBIDDEN：绑定页面滚动、放大超过 1、透视旋转、同时大幅 blur、缩放引发布局跳动、reduced-motion 下保留缩放。

叠层卡片

Stacking Cards

层叠卡片卡片堆叠stacking cardssticky stack

活样本

↕ 在框内滚动

01层 1

发出信号

从一个毫不含糊的观点开始。

02层 2

排成顺序

让每张卡都在故事里有自己的位置。

03层 3

逐层累积

露出足够边缘，让人记得前面的层。

04层 4

完成收束

在结尾自然释放整个卡组。

何时用

用于卡片式叙事的收束，让连续观点逐张覆盖并最终汇成一个可见卡组。

可复制配方

.stack-card {
  position: sticky;
  top: calc(1rem + var(--index) * 1.25rem);
  transform: scale(calc(1 - var(--index) * 0.018));
  transform-origin: top center;
}

@media (prefers-reduced-motion: reduce) {
  .stack-card { transform: none; }
}

/* Give each card enough trailing space for the next card to catch it. */

对 AI 这样说

请使用叠层卡片（Stacking Cards / Sticky Stack）：四张卡依次放在正常文档流中，每张用 position: sticky，并让 top 按索引递增约 20px，形成清晰露边；越靠下的卡只做约 1.8% 的轻微缩放下压，最后自然释放整组。 FORBIDDEN：所有卡使用同一个 top 完全遮死、fixed 定位、超过 5% 的缩放、卡片永久留在页面上、用高强度阴影制造脏乱层级。