侧边工具栏应使用position: fixed + right/top + transform定位以避免重排重绘；按钮需设tabindex="-1"并阻止事件冒泡；暗色模式须结合prefers-color-scheme与localstorage同步；移动端要利用env(safe-area-inset-bottom)和visualviewport适配。
侧边工具栏的 HTML 结构怎么写才不卡顿
直接用 <aside></aside> 或固定定位的 <div> 都行，但关键在于避免重排重绘。浏览器对频繁修改 <code>top / left 的元素渲染压力大，尤其在滚动时。推荐用 position: fixed + right: 0 + top: 50% 定位，再用 transform: translateY(-50%) 居中——这样触发的是合成层，不触发布局计算。
常见错误是把整个工具栏包在 <nav></nav> 里又加一堆语义化修饰，结果 JS 动态显隐时反复重绘。实际只需一个干净容器：
<div id="sidebar-toolbar" style="position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 100;"> <button class="tool-btn" data-action="back-to-top">↑</button> <button class="tool-btn" data-action="dark-mode">?</button> <button class="tool-btn" data-action="feedback">?</button> </div>
按钮点击后如何避免页面跳动或焦点丢失
每个 <button></button> 默认有 focus 样式，且点击会触发 focus 事件，导致滚动条偏移或键盘用户操作中断。必须显式控制：
- 给所有
.tool-btn加tabindex="-1"，禁用键盘聚焦（除非你真需要键盘操作） - 在 JS 中调用
event.preventDefault()和event.stopPropagation()，防止冒泡到父容器 - 点击「回到顶部」时，用
window.scrollTo({ top: 0, behavior: 'smooth' })，别用document.body.scrollTop = 0—— 后者不触发平滑滚动且在某些 iOS 版本失效
暗色模式按钮怎么和系统/用户偏好同步
不能只靠 JS 切换 class，否则刷新就丢状态。优先读取 prefers-color-scheme 媒体查询，再 fallback 到本地存储：
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const savedTheme = localStorage.getItem('theme');
const theme = savedTheme || (isDark ? 'dark' : 'light');
切换时务必同时操作两处：
- 给
元素加/删data-theme="dark"属性（比 class 更易 CSS 选择） - 调用
localStorage.setItem('theme', 'dark')或'light' - CSS 中用
html[data-theme="dark"] .tool-btn { filter: brightness(0.8); }控制图标颜色，别依赖 JS 动态改 style
移动端适配时最常被忽略的两个细节
侧边栏在 iPhone 竖屏下容易被虚拟键盘顶起、或因 Safari 的「地址栏收缩」导致定位错乱。解决方式不是加 media query，而是：
- 给容器加
style="bottom: env(safe-area-inset-bottom)"—— 这个 CSS 环境变量能自动避开刘海/Home Indicator - 监听
resize事件时，检查window.visualViewport?.height是否突变，一旦变化就重置top值（Safari 地址栏收放会改变视口高度） - 别用
vh单位做高度计算，它在 iOS 上不随地址栏变化而更新，会导致位置漂移
工具栏本身体积小，但交互链路稍长：定位 → 显隐 → 主题同步 → 移动端容错。漏掉任意一环，用户就会觉得“点不动”或“闪一下又回去了”。
