怎么利用 Window.requestAnimationFrame 实现 HTML 编辑器平滑的光标跟随-html教程-PHP中文网

直接用 mousemove 会导致光标跳动或延迟，因 DOM 未完成布局更新且高频触发超帧率；应改用 requestAnimationFrame 节流，仅标记待更新并在渲染前安全读取 selection，配合 transform 定位避免强制重排。

怎么利用 window.requestanimationframe 实现 html 编辑器平滑的光标跟随

为什么直接用 `mousemove` 会导致光标跳动或延迟

在 HTML 编辑器（比如 contenteditable 元素）里监听 mousemove 并立刻调用 getSelection().getRangeAt(0) 获取光标位置，常出现两个问题：一是浏览器尚未完成布局更新（比如输入后 DOM 尚未重排），getBoundingClientRect() 返回旧坐标；二是频繁触发导致帧率不稳定，尤其在快速移动时，mousemove 每秒可能触发数十次，但屏幕只刷新 60 次，多余计算白费且抢主线程。

用 `requestAnimationFrame` 节流 + 延迟读取 selection 是关键

核心思路不是“监听鼠标就立刻算”，而是“等浏览器准备渲染下一帧时，再安全读取当前 selection 状态”。这能确保 DOM 已更新、布局已完成，且不会超过帧率上限。

把 mousemove 或 input、keydown 等事件的响应逻辑，改为只设一个标记（如 pendingCursorUpdate = true），不立即计算
在 requestAnimationFrame 回调里检查标记，若为真，则调用 getSelection() + getRangeAt(0) + getBoundingClientRect()，然后更新光标元素位置
务必在回调末尾重置标记，避免重复执行

示例片段：

let pendingCursorUpdate = false;
const cursorEl = document.getElementById('cursor-overlay');

function updateCursorPosition() {
  if (!pendingCursorUpdate) return;
  const sel = window.getSelection();
  if (!sel.rangeCount) return;
  const range = sel.getRangeAt(0);
  const rect = range.getBoundingClientRect();
  if (rect.width > 0) {
    cursorEl.style.left = `${rect.left}px`;
    cursorEl.style.top = `${rect.top}px`;
    cursorEl.style.height = `${rect.height}px`;
  }
  pendingCursorUpdate = false;
}

document.addEventListener('mousemove', () => { pendingCursorUpdate = true; });
document.addEventListener('input', () => { pendingCursorUpdate = true; });
document.addEventListener('keydown', () => { pendingCursorUpdate = true; });

requestAnimationFrame(() => {
  updateCursorPosition();
  requestAnimationFrame(updateCursorPosition); // 持续驱动
});

注意 `range.getBoundingClientRect()` 在空行或末尾的兼容性陷阱

getBoundingClientRect() 对折叠的 range（即光标无选中文本）在不同浏览器行为不一致：Chrome 返回合理光标位置，Firefox 可能在空行返回 { width: 0, height: 0 }，Safari 在 contenteditable 末尾可能返回错误 y 坐标。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

不要依赖 rect.width > 0 作为是否可读的唯一判断，改用 range.collapsed + range.getClientRects().length > 0
对空行 fallback：用 range.startContainer 找到父文本节点，再用 range.startOffset 构造临时 Range 包裹前/后字符，取其 rect
更稳妥的做法是配合 document.caretPositionFromPoint(x, y)（仅 Chrome/Edge）或 document.caretRangeFromPoint(x, y)（Firefox）做兜底，但需注意它们依赖鼠标坐标，所以得从事件中缓存 clientX/clientY