全屏背景滑动应采用section高度设为100vh配合scrollIntoView实现一屏一停，禁用background-attachment:fixed；需重置html/body边距、启用硬件加速、保障可访问性。
全屏背景滑动效果本质是视口高度 + 滚动锚点控制
不是靠 background-attachment: fixed 硬撑，那在移动端容易失效或卡顿。真正稳定的做法是让每个 section 高度占满视口（height: 100vh），再配合 CSS 滚动行为或 JS 锚点跳转实现“一屏一停”。关键前提是 body 不能有意外 margin/padding，且避免嵌套 overflow:auto 的容器截断滚动流。
- 必须给
html, body加margin: 0; padding: 0; height: 100%，否则100vh可能计算失准 - 每个全屏区块用
<section></section>包裹，设min-height: 100vh（比height更容错，兼容内容超长场景） - 禁用默认滚动惯性干扰：在
body上加scroll-behavior: smooth即可启用原生平滑滚动，无需 JS
用 scrollIntoView 实现单页切换，比 hash 跳转更可控
很多人用 <a href="#about"></a> 配合 id 触发跳转，但 hash 变化会污染历史记录、触发页面重绘，且无法监听滚动完成时机。改用 element.scrollIntoView() 直接操作 DOM，响应更快、逻辑更干净。
- 触发按钮写成
<button data-target="section2">下一页</button>，避免依赖 href 和 hash - JS 中获取目标元素：
document.querySelector(`[data-target="${target}"]`)，再调用.scrollIntoView({ behavior: 'smooth', block: 'start' }) - 注意 Safari 旧版本不支持
block: 'start'，可降级为{ behavior: 'smooth' }，视觉差异不大
移动端滑动卡顿？检查是否触发了非合成层渲染
全屏滚动最常被忽略的性能陷阱是：背景图没开启硬件加速，或文字重排导致频繁重绘。Chrome DevTools 的 Rendering 面板里勾选 “Paint flashing”，滑动时如果大片绿色闪动，说明正在软件渲染。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给全屏 section 加
transform: translateZ(0)或will-change: transform强制创建合成层 - 背景图用
background-size: cover+background-position: center，避免用background-attachment: fixed（iOS Safari 会禁用该属性） - 慎用
box-shadow或半透明rgba()背景——它们在低端 Android 上极易掉帧
键盘聚焦和屏幕阅读器支持不能丢
纯视觉滚动容易让键盘用户（Tab 导航）或读屏软件失去焦点路径。比如点击“下一页”后，焦点还停在按钮上，而不是自动移到新 section 的首个可聚焦元素。
立即学习“前端免费学习笔记（深入）”；
- 每次
scrollIntoView后，手动调用section.focus({ preventScroll: true })，前提是该<section></section>设了tabindex="-1" - 给每个 section 加
aria-label，例如<section aria-label="关于我们页面"></section>，读屏软件会朗读 - 禁用
outline: none除非提供替代焦点样式，否则键盘用户会“迷路”
scroll-behavior 的延迟支持。这些细节不处理，用户第一屏就可能卡住。 
