右侧悬浮工具栏需用position: fixed并配position: relative父容器，避免transform/filter干扰；小屏用transform收起+transition动画；禁用pointer-events防遮挡；滚动逻辑优先用intersectionobserver而非scroll事件。
右侧悬浮工具栏不是“加个 position: fixed 就完事”，关键在滚动时的视觉稳定、小屏下的收起逻辑，以及不干扰主内容流。直接套用固定定位常导致点击穿透、z-index 错乱、或在 iOS Safari 里卡顿。
fixed 定位必须配 position: relative 父容器
很多人写 .toolbar { position: fixed; right: 20px; bottom: 20px; }，结果发现工具栏飘到页面最外层（比如被 header 遮住或贴着 viewport 边缘跑偏）。这是因为 fixed 是相对于 viewport 定位，但若父元素有 transform、filter 或 will-change，会创建新的 containing block，导致行为不可控。
稳妥做法是：确保工具栏的直系父容器设 position: relative，哪怕它没尺寸限制；同时加 z-index: 1000 显式声明层级。
- 不要把工具栏塞进
transform: translateY(0)的 wrapper 里 - 避免在工具栏祖先链上使用
will-change: transform - 移动端需额外加
touch-action: manipulation防止长按误触发菜单
小屏下自动收起要用 @media (max-width: 768px) + transform
纯靠 display: none 切换会引发布局抖动，且无法做过渡动画。正确方式是保留 DOM，用 transform: translateX(100%) 移出视口，并配合 transition: transform 0.3s ease-out。
注意：收起状态仍要保留 position: fixed，否则切回大屏时会闪一下；同时给收起按钮预留一个 width: 40px 的触发区，防止手指点不准。
- 收起时加
pointer-events: none，避免遮挡下方可点击区域 - 用
inert属性（现代浏览器）或 JS 手动禁用子项 focus/tabindex - 别用
opacity: 0单独控制——它仍响应点击，且影响无障碍读取
滚动监听慎用 scroll 事件，优先用 IntersectionObserver
老方案用 window.addEventListener('scroll', ...) 做“滚动到某位置显示/隐藏”极易掉帧，尤其在低端 Android 设备上。现在应改用 IntersectionObserver 监听工具栏是否进入可视区，或监听某个锚点元素的交叉状态。
例如：想让工具栏在用户滚过文章首屏后才出现，就观察一个 id="trigger" 的空 div 是否 isIntersecting === true，而不是反复算 scrollTop。
- observer 要设
rootMargin: '0px 0px -100px 0px'提前触发，避免临界卡顿 - 不要在回调里直接操作 DOM 样式，用
requestAnimationFrame包一层 - IE 不支持 IntersectionObserver，需用 polyfill 或降级为 scroll + throttle
真正难的不是让它“贴右边”，而是它在各种滚动节奏、缩放比例、深色模式切换、甚至系统字体放大设置下，依然不抢焦点、不遮文字、不抖动、不吞点击——这些细节没加 will-change: transform 或没测过 iOS 17 的 overscroll-behavior 就容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
