全屏滚动网页的核心结构是：每个屏用<section>包裹并设height: 100vh，父容器（如<body>）设overflow: hidden禁用默认滚动，不给<html>或<body>设height: 100%以防移动端100vh计算异常，内容超长时内部单独设overflow-y: auto。
全屏滚动网页的核心结构怎么写
全屏滚动不是靠 CSS 动画或 JS 库“自动实现”的，而是靠 height: 100vh + overflow-y: hidden + 手动控制滚动锚点。浏览器原生不提供“一页一屏”行为，必须自己定义“屏”的边界和切换逻辑。
- 每个“屏”用
<section>或<div class="section">包裹，设height: 100vh，且父容器（如<body>）禁用默认滚动：overflow: hidden - 不要给
<html>或<body>设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 的兼容性最差，常见表现是：滚一半停住、触控响应延迟、页面缩放错乱。
- 必须加 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 键盘顶起视口时。这些边界场景没处理好，再漂亮的动效也显得卡顿或失控。
