分段式导航必须用语义化section+id结构，禁用div分段；需设min-height:100vh、html{scroll-behavior:smooth}；导航指示用IntersectionObserver监听，滚动控制优先用scrollTo()并减去fixed头部高度。
分段式导航的HTML结构必须用section + id，不能只靠div
分段式滚动依赖浏览器对锚点的原生识别和JavaScript对元素位置的精确计算，所以每个内容区块必须是语义清晰、可被scrollIntoView()或getBoundingClientRect()准确测量的独立节点。section天然具备这一能力，而纯div没有语义约束，容易导致滚动偏移、监听失效或无障碍支持断裂。
常见错误现象：scrollIntoView()跳转后停在错误位置、IntersectionObserver误判可见状态、屏幕阅读器无法按区块导航。
- 每个分段用
<section id="home"></section>，ID值要简短、小写、无空格（如features，别用our-features-section） - 避免嵌套过深：不要把
section包在div class="wrapper"里再设overflow: hidden——这会切断滚动上下文 - 所有
section需有明确高度，推荐min-height: 100vh，而非height: 100vh（防内容溢出时截断）
CSS滚动行为启用scroll-behavior: smooth但别只靠它
scroll-behavior: smooth能让a[href="#about"]点击跳转自动平滑，但它不控制滚动“停在哪”——只影响“怎么动”。如果你用scrollTo()手动滚动，这个CSS属性依然生效；但若用top动画或transform位移模拟滚动，它完全不起作用。
兼容性注意：Chrome 61+、Firefox 68+、Safari 15.4+ 支持，IE全系不支持；移动端iOS Safari 15.4+才开始稳定支持。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须加在
html上：html { scroll-behavior: smooth; }，加在body无效 - 不要给
section本身设scroll-behavior——它只对滚动容器生效，不是内容块属性 - 如果同时用了第三方库（如
locomotive-scroll），关掉这个CSS，否则动画冲突导致卡顿
导航点指示器必须用IntersectionObserver监听，别用scroll事件硬算
用window.addEventListener('scroll', ...)实时算每个section的getBoundingClientRect().top来判断当前激活项，性能差、易抖动、移动端掉帧严重。真实项目中90%的“指示点不同步”问题都源于此。
IntersectionObserver是浏览器原生优化的监听机制，只在元素真正进入/离开视口时触发回调，不阻塞主线程。
- 初始化时设
threshold: [0, 0.5]，让“半进入”就触发，比单纯threshold: 0.5更灵敏 - 观察目标是所有
section，但只在回调里更新data-active属性或aria-current="true"，由CSS控制样式 - 别在回调里直接调
document.querySelector('.dots li').classList.toggle(...)——批量操作DOM太重，改用dataset+ CSS attribute selector
滑动切换的JavaScript控制优先用scrollTo()，慎用scrollIntoView()
scrollIntoView()默认行为是“让元素顶部贴顶”，在分段式布局中会导致标题被fixed导航栏遮挡；而scrollTo()可以精确控制top偏移，适配各种头部高度。
性能差异明显：scrollIntoView()会触发重排（reflow），scrollTo()在现代浏览器中可被硬件加速，尤其配合{ behavior: 'smooth' }时更稳定。
- 计算目标位置时，用
section.offsetTop - header.offsetHeight，而不是section.getBoundingClientRect().top + window.scrollY（后者受缩放、iframe影响） - 点击导航点后，先
preventDefault()，再scrollTo()，避免页面闪一下又跳回原位置 - 移动端要注意
visualViewport变化（比如键盘弹出），此时header.offsetHeight可能临时不准，建议缓存初始值或监听resize事件修正
实际滚动逻辑里最常被忽略的，是header是否position: fixed以及它是否随滚动动态变化高度——这两点直接决定偏移量该减多少、什么时候该重新计算。没处理好，指示点和视觉位置永远差一截。
