在网页上，滚动通常只是看更多内容的一种方式。但有没有想过，滚动本身可以成为故事的一部分，甚至让读者通过选择滚动方向来决定剧情走向？这听起来有点疯狂，但借助CSS一些较新的特性，比如滚动状态查询和滚动驱动动画，这事儿还真能实现。这种把滚动机制融入叙事的手法，圈子里叫“滚动叙事”，而如果让剧情发展不再是一条直线，变成由滚动方向决定的岔路口，那就是“非线性滚动叙事”。下面就来扒一扒，如何用纯CSS捣鼓出这么个东西，让页面滚动变成一场“选择你的冒险”游戏。
开局就玩心跳，页面加载位置先来个下马威
一般网页加载，不都是从顶部开始看吗？咱这玩法偏不。为了让故事一开始就充满悬念，得让页面加载时，视图直接落在中间位置，让访问者一进来就得琢磨：是往左滚动，还是往右滚动？这感觉就像被扔进一个迷宫，只有自己决定朝哪边走。
实现这招，得靠scroll-initial-target这个新属性。它的作用就是指定页面上哪个元素，在加载时应该自动滚动到可视区域。这比过去用CSS动画加滚动对齐属性来硬搞要清爽得多。
/* 设定故事的起点，比如在水平方向的400vw位置 */
.start-point {
position: absolute;
left: 400vw;
scroll-initial-target: nearest;
}这行代码就相当于给浏览器指了条路：“兄弟，页面加载好就直接滚到这个叫start-point的元素那儿。” 这样就营造出那种开局即高潮的紧张感，但必须得提醒一句，这种反常规的页面行为不能瞎用，得确保跟故事设定贴合。比如用在一个“左右为难”的剧情开头，就挺带感。
滚动状态监测，让故事背景跟着动起来
故事场景里，主角在逃命，背后的城市景观得跟着移动，营造出在飞速奔跑的既视感。这活儿得靠滚动驱动动画来实现。原理很简单，把滚动条的位置变化，直接映射成动画的进度。
比如，给不同的背景图层设置不同的滚动速度，就能做出视差滚动效果。更深一层的玩法是，当滚动到特定位置时，需要切换剧情状态，比如主角跑到画面左边角落，才允许他向上爬梯子。这就要用到滚动状态查询。
/* 当容器在水平方向已经滚到最左边时 */
@container scroll-state((scrollable: left)) {
body {
overflow-y: hidden; /* 禁止垂直滚动，现在只能水平移动？不对，应该是开启垂直滚动 */
/* 更正：应该是当水平方向无法再向左滚动时，就允许垂直滚动来爬梯子 */
overflow-y: auto;
}
}这段代码的关键在于，它能检测到滚动条是否已经触碰到了边界。当主角跑到最左边，没法再往左时，就自动开启垂直滚动，让主角可以往上爬。这样整个游戏的交互逻辑，就靠CSS自个儿给盘活了。
这里有个容易踩的坑，scrollable: left这个状态，指的是在水平方向上，是否还能向左滚动。如果已经滚到头了，这个状态就不成立。所以逻辑要理清楚，是“当还能向左滚动时”做一件事，还是“当不能再向左滚动时”做另一件事。测试的时候最好多试试不同方向的滚动，看看状态切换是不是跟预想的一样。
剧情分支怎么选？条件样式来收尾
故事不能只有一个结局。主角要是拿到了光剑，就能反杀；要是没拿到，就得挂。这种剧情分支，得用CSS条件样式来实现。当游戏角色相遇时，触发终局判定，然后根据当前状态（比如有没有光剑），展示不同的结局动画，并且把页面滚动给锁死。
/* 用自定义属性记录游戏状态，初始为playing */
body {
--game-state: playing;
}
/* 当游戏状态变为ending时，隐藏滚动条，禁止滚动 */
@container style(--game-state: ending) {
body {
overflow: hidden;
}
}
/* 根据是否有光剑和游戏状态，展示不同结局 */
@container style(--player-has-saber: true) and style(--game-state: ending) {
/* 显示主角获胜的动画和对话 */
.sprite {
animation: attack 0.7s steps(4) forwards;
}
.speech-bubble::before {
content: '赢了！刷新页面再玩一局吧';
}
}
@container style(--player-has-saber: false) and style(--game-state: ending) {
/* 显示主角失败的动画和反派的嘲讽 */
.sprite {
animation: player-die .8s steps(6) .7s forwards;
}
.evil-twin .speech-bubble::before {
content: '哈哈！刷新页面，再来挑战吧';
}
}这里的核心是 style() 查询，它能检查CSS自定义属性的值。通过组合不同的条件，就能实现“如果…那么…”的逻辑分支。但必须留神，这种纯CSS的条件判断虽然很香，但处理复杂状态时会变得非常绕。比如上面的代码里，为了判定“主角是否和反派相遇”，还得用min()、max()函数去计算位置，再加上if()条件语句，整个逻辑堆在一起，可读性会直线下降。调试的时候，最好在浏览器开发者工具里一步步检查各个自定义属性的值，才能快速定位问题。
关于非线性滚动叙事的碎碎念
把页面滚动玩成这样，到底是创意还是瞎折腾？这个嘛，得看故事本身需不需要。像这个小游戏，主角的逃亡、攀爬、对决，每一步都由滚动驱动，确实让叙事多了些沉浸感，而不只是点按钮看剧情。但从技术实现来看，纯CSS搞这套，状态管理还是挺脆的，比如用动画暂停来记录“是否拿到光剑”，偶尔会出bug，导致开局就手持神器。所以，如果真要正经做个复杂的互动故事，混搭JavaScript来做状态记录和事件触发，可能会更稳当。毕竟，CSS擅长的是样式和动画表现，而JS更适合管理数据和复杂逻辑。就像这个例子里的滚动快照事件，如果用JS来监听，不仅能存状态，还能配上音效，那体验感又能蹭蹭往上窜。说到底，工具是拿来用的，哪种顺手、哪种能更好地服务故事，就用哪种，没必要死磕纯CSS。