用 transform 而不是 left/right 是因后者触发 layout 重排导致掉帧，前者仅影响合成层更流畅；需限定 transition: transform 0.3s、设 translateX(100%) 收起、加 pointer-events: none 防遮挡。
为什么用 transform 而不是 left/right 做侧边栏收起动画
left 或 right 动画会触发浏览器 layout 重排，尤其在低端安卓 WebView 或 iOS Safari 中掉帧明显；而 transform: translateX() 只影响合成层，性能更稳。实测中，直接改 right 值会让工具栏“抽搐式滑出”，transform 则顺滑得多。
常见错误是只写 transition: all 0.3s，结果连 z-index 都被过渡——这会导致层级错乱。必须明确限定属性：transition: transform 0.3s ease-out。
- 初始收起状态设为
transform: translateX(100%)（完全移出右侧视口） - 展开时加
.is-open类，内含transform: translateX(0) - 收起按钮本身要保留固定宽度（如
width: 40px），否则手指点不准 - 收起后务必加
pointer-events: none，否则仍会遮挡下方可点击区域
移动端小屏下如何避免悬浮栏“卡住不动”
iOS Safari 对 position: fixed 在 overflow-scroll 区域内的支持不稳定——如果工具栏父容器设置了 overflow: hidden 或 -webkit-overflow-scrolling: touch，它可能粘在原地不随滚动更新位置。
真正有效的做法是：确保工具栏的**直系父容器**设 position: relative，哪怕它没尺寸；同时避免祖先链上出现 transform、filter 或 will-change，否则会创建新的 containing block，让 fixed 失效。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 不要把工具栏塞进一个
transform: translateY(0)的 wrapper 里 - 移动端需额外加
touch-action: manipulation到收起/展开按钮上，防长按弹出菜单 - 若页面有多个滚动容器（如 tab 页内局部滚动），工具栏必须脱离这些容器，挂到
下
用 IntersectionObserver 替代 scroll 事件监听滚动显隐
老方案用 window.addEventListener('scroll', ...) 做“滚过首屏显示工具栏”，在低端 Android 上极易掉帧，且频繁触发导致 JS 主线程阻塞。现代方案应交由浏览器原生优化的 IntersectionObserver。
例如监听一个 id="trigger" 的空 div 是否进入可视区：isIntersecting === true 时再显示工具栏。比手动算 scrollTop 更轻量、更可靠。
- observer 必须配
rootMargin: '0px 0px -100px 0px'，提前 100px 触发，避免临界卡顿 - 回调里别直接操作 DOM 样式，用
requestAnimationFrame包一层 - IE 不支持，需引入 polyfill 或降级为 scroll + 节流（throttle）
- 若工具栏需“始终可见”，就不用监听——直接设
position: fixed即可，别硬套 Observer
关闭按钮点击无响应？先查这三处 touch 延迟问题
不是代码写错了，而是移动端特有的交互陷阱。iOS Safari 默认等待 300ms 才触发 click，用户点下去像“卡住”。这不是 bug，是历史兼容机制。
最简解法是给按钮加 touch-action: manipulation，它会告诉浏览器：“这个元素只做点击，别等双击缩放”。实测可消除全部延迟。
- 按钮的
type必须显式设为button，否则在<form></form>内会默认提交 - 禁用
return false，统一用event.preventDefault() - 收起状态仍要保留
position: fixed，否则切回大屏时会闪一下
