全屏滚动网页的核心结构是：每个屏用包裹并设height: 100vh，父容器（如）设overflow: hidden禁用默认滚动，不给或设height: 100%以防移动端100vh计算异常，内容超长时内部单独设overflow-y: auto。

全屏滚动网页的核心结构怎么写

全屏滚动不是靠 CSS 动画或 JS 库“自动实现”的，而是靠 height: 100vh + overflow-y: hidden + 手动控制滚动锚点。浏览器原生不提供“一页一屏”行为，必须自己定义“屏”的边界和切换逻辑。

• 每个“屏”用 <section></section> 或 <div class="section"> 包裹，设 <code>height: 100vh，且父容器（如 ）禁用默认滚动：overflow: hidden
• 不要给 或 设 height: 100% —— 这会导致 100vh 计算异常（尤其在移动端 Safari）
• 如果内容超出单屏高度（比如文字太多），100vh 会裁剪，需确保内部用 overflow-y: auto 单独处理可滚动区域

怎么让滚动“卡”在每一页顶部

浏览器原生滚动是平滑连续的，要“停驻”在每页顶部，得拦截默认滚动、手动跳转到目标 section 的 offsetTop。纯 HTML/CSS 做不到，必须加轻量 JS。

• 监听 wheel 或 touchmove（移动端需额外处理），记录当前屏索引
• 用 window.scrollTo({ top: targetY, behavior: 'smooth' }) 跳转 —— 注意：部分旧版 Safari 不支持 behavior: 'smooth'，可降级为 scrollTo(0, targetY)
• 关键防抖：避免快速滚动触发多次跳转，加 isScrolling 标志位，跳转完成后才重置
• 别忘了键盘方向键支持：keydown 监听 ArrowUp/ArrowDown，同样跳转相邻 section

移动端 Safari 滚动卡顿或失效怎么办

iOS Safari 对 overflow: hidden 和 scrollTo 的兼容性最差，常见表现是：滚一半停住、触控响应延迟、页面缩放错乱。


anything-to-html
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
下载
• 必须加 viewport meta：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> —— 少一个参数都可能触发双指缩放干扰
• 禁用 body 的 touchmove 默认行为：document.body.addEventListener('touchmove', e => e.preventDefault(), { passive: false })，但注意这会同时禁掉内部可滚动区域（如长列表），得用事件委托精准拦截
• 避免在 section 上设 transform 或 will-change —— iOS 渲染层容易崩溃，导致白屏或卡死
• 测试时务必真机连 Safari Web Inspector，看 console 是否报 TypeError: null is not an object (evaluating 'el.offsetTop') —— 通常是 DOM 未加载完就执行 JS

要不要用现成库（如 fullpage.js）

fullpage.js、scrollify 等库确实封装了锚点、键盘、响应式等逻辑，但它们默认注入大量内联样式、强制重排 layout、且难以调试滚动卡顿源。小项目（≤5 屏）手写 50 行 JS 更可控。

• 如果只用原生 API，核心逻辑就是：获取所有 section 元素 → 绑定 wheel/touch/keydown → 计算目标 offsetTop → scrollTo → 更新 active class
• 避免引入 jQuery 或 Lodash —— 现代浏览器原生方法已足够：Array.from(document.querySelectorAll('.section'))、element.getBoundingClientRect().top 都比依赖库更稳
• 真正麻烦的不是滚动逻辑，而是：iOS 键盘弹出后 vh 值重算、横竖屏切换、PWA 安装后地址栏隐藏导致视口高度变化 —— 这些没法靠库解决，得单独监听 resize 和 orientationchange

全屏滚动的坑不在“怎么动”，而在“什么时候不该动”——比如用户正在输入框打字、页面刚加载完 DOM、或者 iOS 键盘顶起视口时。这些边界场景没处理好，再漂亮的动效也显得卡顿或失控。