主页/WEB笔记/滚动讲个故事，咋就成了网页设计的硬核新玩法？

滚动讲个故事，咋就成了网页设计的硬核新玩法？

3,138字
13–20 分钟
in

这种把网页滚动变成剧情推进器的设计，正悄悄改变着咱们浏览网页的方式。它不是简单地把文字堆在页面上让你往下扒拉，而是把滚动这个动作本身变成了故事的一部分。就像小时候玩的“选择你自己的冒险”那种游戏书，现在全用鼠标滚轮来操控了。最近看到不少大神用纯CSS就捣鼓出了非线性剧情，用户往左滚是一个结局，往右滚又是另一个走向，这种沉浸感是传统网页给不了的。今天咱就来扒一扒，这玩意儿到底咋实现的，又有哪些骚操作能让网页“活”起来。

目录

啥是滚动叙事

滚动叙事这词儿听着挺玄乎，其实就是把网页滚动和故事讲述绑在一块。好比说，以前看电子书只能一页页往下翻，现在则可以通过滚动来触发动画、切换场景、甚至决定剧情走向。它背后的核心逻辑，是让页面滚动条不再只是浏览工具，而是变成了一种交互控制器。这跟古人看羊皮卷轴时，用手慢慢展开的动作如出一辙，只不过现在换成了手指在触摸板上一划拉。

纯CSS搞定滚动魔法

过去要实现这种滚动驱动的效果，得写一堆复杂的JavaScript，还得小心翼翼处理各种监听事件。现在Chrome浏览器原生支持了滚动驱动的动画，只用几行CSS就能搞定。

控制起始位置

为了让故事一开始就进入状态，可以用scroll-initial-target属性直接让页面定位在某个元素上。比如下面的代码，可以让页面加载时就停在某个坐标点：

.spawn-point {
  position: absolute;
  left: 400vw;
  scroll-initial-target: nearest;
}

这么一搞，页面打开时就像电影开场，直接把观众扔进剧情高潮部分。不过这种反常规的操作得有足够的理由支撑，比如在横向滚动的叙事场景里，这种设计能立刻营造出紧张感。

检测滚动状态

滚动过程中，需要知道页面当前处于什么状态：是滚到了顶部、底部，还是左右边界。scroll-state查询就是干这活儿的：

@container scroll-state((scrollable: left)) {
  body {
    overflow-y: hidden;
  }
}

上面这段代码表示，当页面左边没法再滚动时，就把垂直滚动给关了。这就好比游戏里角色跑到墙角，不能再往左跑，这时候就可以触发爬梯子之类的垂直动作了。

动画时间线绑定

animation-timeline属性可以把动画和滚动进度直接绑定。拿一个跑动的小人来举例，让他的移动速度跟滚动距离挂钩：

@keyframes runAnim {
  from { transform: translateX(0); }
  to { transform: translateX(-100px); }
}

.sprite {
  animation: runAnim 0.8s steps(8) infinite;
  animation-timeline: scroll(x);
}

这样一来，滚动条每移动一点，小人就跑动几步，滚动速度决定了角色的奔跑节奏。这种绑定特别适合做视差滚动背景，比如天空、建筑这些图层，让它们以不同速度移动，营造出景深感。

从零开始搭一个分支剧情

假设要做一个简单的像素风小游戏，主角在街上遇到坏蛋，玩家可以通过滚动选择逃跑还是硬刚。整个制作过程可以拆成下面几步：

第一步：搭建场景

先搞一个超长的横向滚动区域，宽度得足够大，保证能容纳多个场景。把背景图层、主角、坏蛋都用绝对定位放好。坏蛋要用position: fixed固定在屏幕上，然后通过动画控制他往左移动，造成追过来的假象。

.evil-twin {
  position: fixed;
  bottom: 5px;
  left: 0;
  animation: 10s linear infinite evilTwinChase;
}

第二步：设置分支入口

游戏一开始，主角出现在屏幕中间偏左的位置，玩家可以选择向左滚（逃跑）或者向右滚（迎战）。这就需要用到前面提到的scroll-initial-target，把初始位置设在一个中间点。然后用滚动状态检测来判断玩家选择了哪个方向。

第三步：实现条件剧情

当玩家滚到最左边时，触发爬梯子事件。这时候要用scroll-state检测是否已经滚到左边界，然后切换成垂直滚动，允许主角往上爬去拿武器。

@container scroll-state((scrollable: left)) {
  .ladder {
    display: block;
  }
  body {
    overflow-y: auto;
  }
}

当主角爬到梯子顶端，需要记住他拿到了武器。这里可以用一个自定义属性来记录状态，通过动画来改变这个属性的值：

@keyframes collectSaber {
  from { --hasSaber: false; }
  to { --hasSaber: true; }
}

body {
  animation: .25s forwards var(--collectionState) collectSaber;
}

第四步：处理结局碰撞

当主角和坏蛋的X坐标重叠时，就得判定结局了。这要用到CSS的if()条件判断，结合两个角色的位置变量来决定显示哪种结局动画。

body {
  --gameState: if(
    style(--playerX: calc(var(--enemyX) - 10px)): ending; 
    else: playing
  );
}

如果主角有武器，就播放攻击动画，坏蛋倒下；如果没有，就播放主角被击败的动画。然后禁用滚动，显示重玩提示。

遇到的那些坑和填坑法子

在搞这种复杂滚动叙事时，有几个地方特别容易出幺蛾子。

用CSS存储状态目前还是挺脆弱的。比如上面那个记录是否捡到武器的例子，因为动画时间精度问题，偶尔会出现开局就拿着武器的bug。这时候可以配合scroll-snap-events用一点JavaScript来记录状态，会更稳当。

浏览器兼容性也是个老大难。scroll-state、scroll-initial-target这些新特性目前只在Chromium内核的浏览器里跑得顺，Safari和Firefox还在赶进度。所以在实际项目中，得准备个降级方案。比如用@supports判断是否支持这些特性，不支持的话就换成传统滚动布局。

窗口大小变化也会搞事情。特别是在结局动画播放时，如果用户手贱调整了浏览器窗口大小，可能会导致布局错乱，动画卡在半空。解决思路是用ResizeObserver监听尺寸变化，在游戏进行中禁用缩放，或者在结局时锁定尺寸。

还有个问题就是滚动冲突。当同时存在水平和垂直滚动时，很容易让用户晕头转向。解决方案是只在特定区域允许特定方向的滚动，比如主角在平地上只能左右滚，爬到梯子上时才允许上下滚，用scroll-state就能优雅地实现这种切换。

整点不一样的滚动叙事

除了这种像素游戏，滚动叙事还能用在很多正经场合。比如讲一个家暴受害者的故事，用横向滚动来展示暴力升级的过程，观众通过滚动就能感受到那种步步紧逼的压迫感。这种形式比平铺直叙的文字更有冲击力，因为观众用自己的滚动动作参与了叙事。

再比如做个产品发布页面，随着滚动，产品组件像拼图一样一点点组装起来，每个滚动阶段展示不同的功能特点。这种动态展示比静态图文更能抓住眼球。

甚至可以搞个互动小说，读者通过滚动选择不同章节，每个选择都影响后续剧情。这种“滚动即选择”的设计，比传统的点击按钮更符合浏览网页的直觉，滚动过程本身就成了故事的一部分。

滚动叙事这套玩法，说白了就是让网页滚动条从工具变成了故事本身的一部分。它不是什么花里胡哨的炫技，而是用一种更直观、更沉浸的方式把内容传递给观众。就像那位大神说的，最好的CSS技巧，是让你感觉不到技巧的存在，仿佛浏览器天生就该这么工作。虽然现在还有些浏览器不支持，兼容性得费点心思，但这套玩法绝对值得在合适的项目里试一试。毕竟，谁不喜欢那种边扒拉边看故事的感觉呢？

最新发布