本文详解如何在基于滚动驱动的 Canvas 动画结束后，自然过渡到固定位置的后续 HTML 内容（如 ），通过动态切换 position: fixed 与 position: absolute 并精确计算滚动边界，实现视觉连贯、可滚动到底部的完整页面体验。
本文详解如何在基于滚动驱动的 canvas 动画结束后，自然过渡到固定位置的后续 html 内容（如 `
`），通过动态切换 `position: fixed` 与 `position: absolute` 并精确计算滚动边界，实现视觉连贯、可滚动到底部的完整页面体验。
在构建「滚动即动画」的沉浸式网页（如 OLED 月相轮播、产品视差展示）时，一个常见需求是：Canvas 全屏居中播放完所有帧后，页面继续向下滚动，露出底部的补充内容（例如标题 <h2></h2>、CTA 区域或图片）。但直接将内容放在 Canvas 后方往往失效——因为 Canvas 使用 position: fixed 脱离文档流，其后的元素会“无视”它的存在，导致页面高度不足、无法滚动到底部。
核心解法在于 双模式定位控制 + 滚动锚点同步：
✅ 关键策略解析
-
fixed模式（动画中）：Canvas 和 overlay 居中固定，不占文档流空间，滚动由html.scrollHeight驱动。 -
absolute模式（动画结束）：将 Canvas/overlay 转为absolute，并手动计算其在当前滚动位置下的绝对坐标，使其“锚定”在视口原位置；同时让.below-canvas元素紧贴其下方，进入文档流，撑开页面高度。 -
滚动边界修正：
maxScrollTop需预留底部内容高度空间（如-50px），避免最后一帧触发过早；scrollTop与pageYOffset结合确保坐标计算精准。
? 实现代码要点
// 动态切换定位模式
function makeAbsolute(el) {
const rect = el.getBoundingClientRect();
el.style.position = 'absolute';
el.style.top = `${window.pageYOffset + rect.top}px`;
el.style.left = `${window.pageXOffset + rect.left}px`;
el.style.transform = 'none'; // 清除 translate(-50%,-50%)
// 将 .below-canvas 紧跟 Canvas 底部（进入文档流）
const below = document.querySelector('.below-canvas');
below.style.position = 'absolute';
below.style.top = `${window.pageYOffset + rect.top + rect.height}px`;
}
function makeFixed(el) {
el.style.position = 'fixed';
el.style.top = '50%';
el.style.left = '50%';
el.style.transform = 'translate(-50%, -50%)';
const below = document.querySelector('.below-canvas');
below.style.position = 'fixed';
below.style.top = '100%'; // 紧贴视口底部（初始隐藏）
}? CSS 适配要点
- 移除
html/body { height: 2000vh }这类强制高度——它会破坏真实滚动计算。改用min-height: 100vh或依赖内容撑高。 -
.below-canvas初始设为position: fixed; top: 100%，动画结束时通过makeAbsolute()注入精确top值，使其成为文档流一部分。 - Canvas 和 overlay 的
transition保留 opacity 变化，但避免对position或transform做过渡（浏览器不支持）。
⚠️ 注意事项
-
图像预加载必须完成：
frameCount = 294量级的图片需确保preloadImages()完成后再绑定 scroll 事件，否则images[index]可能为undefined。 -
防抖与帧率优化：
requestAnimationFrame已用于平滑绘制，但scroll事件内仍需cancelAnimationFrame防止累积调用。 -
响应式兼容性：
getBoundingClientRect()返回的是视口坐标，不受缩放/滚动影响，但需在resize时重新校准（本例未涉及，建议补充监听）。 -
无障碍提示：动画结束后添加
aria-hidden="true"到 Canvas，aria-live="polite"到.content，提升可访问性。
✅ 最终效果验证
- 页面加载后出现垂直滚动条；
- 向下滚动 → Canvas 逐帧播放动画；
- 滚至末尾 → Canvas 淡出，
.content和.below-canvas依次淡入； - 继续滚动 →
.below-canvas（含<h2></h2>）平稳进入视口，无跳变。
这种方案不依赖第三方库，纯原生 JS + CSS 实现，兼顾性能与语义化，是滚动驱动型创意网页的可靠基础架构。
