滚动显现
Scroll Reveal
初级通用滚动显现（Scroll Reveal）是让页面内容在滚动进入视野时才淡入或轻微上移出现。官网、介绍页常用它，让内容随着往下读被逐段「铺」出来；做得好时用户几乎察觉不到等待，做不好就是一屏空白。
你可能会说：「官网往下滚的时候，能不能让每一块内容滑到眼前时再慢慢出现，而不是一开始就全摆在那？」
读之前建议先了解
动手看看往下滚，内容逐段出现
要点滚动显现是怎样起作用的？
- 1
用 IntersectionObserver 判断「进入视野」
我们不需要自己监听滚动、算每个元素的位置，浏览器提供了 IntersectionObserver：告诉它要观察哪些元素，元素进入或离开视野时它会通知你。收到通知后给元素加一个类名，让它从透明、略微偏下的状态过渡到正常状态。通过 rootMargin 可以调触发点，比如元素露出 10%~20% 时开始。
- 2
触发点别太晚，动作别太大
常见的毛病是触发点设得太晚（滚到视野中间才开始），用户盯着空白滚了一段才看到内容；页面最后一两段甚至永远到不了那条线，滚到底了还是空的。另一个毛病是动作太大，从侧边大幅飞入、还带旋转，读到第三段就觉得页面在晃。淡入加上移 20 像素左右、400~600 毫秒，一般只播一次，就足够了。
- 3
脚本没跑时内容必须还在
如果把「隐藏」直接写进 CSS 初始样式，显示全靠脚本加类名，那么脚本加载失败、被拦截，或者搜索引擎和截图工具抓取页面时，看到的就是一页空白。稳妥的做法是：先由脚本给页面加一个「可以做动画」的标记，有这个标记时才把元素预先隐藏；或者干脆让内容默认可见，只给已经在视野外的元素加动画。
容易混淆的地方
滚动显现是「到了某个位置就触发，然后按时间播放」；滚动驱动动画则是动画进度直接跟着滚动位置走，停在一半就是一半。它也不是懒加载：懒加载是等元素快进入视野时才去下载图片等资源，目的是省流量；滚动显现只是改变已有内容的出现方式，两者可以同时用。
什么时候用
适合用
- 产品官网的功能介绍区，每一块在滚到眼前时淡入，让长页面有阅读节奏。
- 作品集或案例页，项目卡片进入视野时依次出现。
- 长篇专题报道里的图表，在读到那一段时再出现，引导读者把注意力放到图上。
不适合用
- 后台、文档这类用户要快速查找信息的页面，别让内容滚到才出现；直接显示更高效。
- 首屏的标题和主按钮，别等滚动或动画后才显示；用户一打开就该看到。
- 需要被搜索引擎收录的正文，别在脚本运行前就把它设成透明；保证没有脚本时内容也可见。
练一练选一个答案，看看解释
你给官网加了滚动显现，有用户反馈「页面下半部分一片空白」。最可能的原因和改法是？
让 AI 帮你做复制给 AI Agent 直接用
请给【页面里需要逐段出现的内容，如：官网首页的功能介绍区块】加上滚动显现。先阅读页面结构、现有样式和动画写法。用 IntersectionObserver 在元素露出约 15% 时触发，淡入并上移 20 像素左右，400~600 毫秒，只播一次。最容易出错的地方要处理好：不要把隐藏写死在初始样式里，要先由脚本给根元素加标记，再按标记隐藏，脚本失败时内容必须可见；首屏内容直接显示；页面最后几段也要能触发。开启减少动效时直接显示。沿用现有写法，不改无关代码。最后说明怎样验证：禁用 JavaScript 打开页面内容完整，快速滚到底没有空白。