tooltip滚动错乱需用position:fixed+getboundingclientrect()动态重算位置，配合requestanimationframe防抖，避免absolute定位及overflow截断问题，并注意移动端缩放与事件监听兼容性。
滚动时Tooltip位置错乱的常见表现
页面滚动后，tooltip 仍固定在初始计算的位置（比如贴着元素右上角），导致悬停时显示在屏幕外、遮挡内容，甚至完全看不见。这不是 CSS 动画问题，而是定位策略没应对滚动带来的视口坐标变化。
用 position: fixed + getBoundingClientRect() 动态重算
纯 CSS 无法监听滚动并更新 top/left，必须配合 JS。核心思路是：每次 scroll 或 resize 时，重新获取目标元素在视口内的位置，再设置 tooltip 的 style.top 和 style.left。
关键点：
-
getBoundingClientRect()返回的是相对于当前视口的坐标，天然适配滚动，不用手动减window.scrollY - tooltip 必须设为
position: fixed，否则滚动时会随文档流偏移 - 避免在
scroll事件里直接高频调用 —— 加防抖（如requestAnimationFrame）或节流（setTimeout延迟 16ms） - 若 tooltip 内容宽高不固定，重算前先
visibility: hidden，再测尺寸，避免闪动
示例片段：
function updateTooltipPos() {
const rect = targetEl.getBoundingClientRect();
tooltipEl.style.left = `${rect.right + 8}px`;
tooltipEl.style.top = `${rect.top}px`;
}
window.addEventListener('scroll', () => requestAnimationFrame(updateTooltipPos));
为什么不用 position: absolute + transform？
有人尝试用 absolute 定位再靠 JS 改 transform: translate()，但这样依赖父容器的定位上下文。一旦 tooltip 父级有 transform、perspective 或 filter，就会创建新层叠上下文，导致定位偏差，且滚动时仍需反复计算父级 offset，反而更难控制。
更麻烦的是：absolute 元素受祖先 overflow: hidden 截断 —— tooltip 很可能被裁掉。而 fixed 是相对于视口，天然规避这类限制。
移动端和缩放场景下的坑
在 iOS Safari 或 Chrome 缩放页面时，getBoundingClientRect() 仍准确，但 fixed 元素可能因 viewport 设置或 zoom 行为出现偏移。务必检查 <meta name="viewport"> 是否含 user-scalable=no 或 maximum-scale 限制；若允许缩放，tooltip 的 font-size 和 padding 建议用 rem 或 em，避免硬写 px 导致文字挤出框体。
另外，iOS 上 scroll 事件触发不及时，建议同时监听 touchmove 并用 { passive: true } 避免卡顿。
真正麻烦的不是怎么写，是得在每次滚动、缩放、窗口 resize、甚至字体加载完成（影响尺寸）时都兜底重算 —— 这些边界条件容易漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
