Svelte伪选框窗口调整时偏移问题求助

窗口resize时伪选框偏移，本质是resize触发时DOM元素的布局重排还没完成：你用requestAnimationFrame虽然能拿到下一帧，但Svelte的DOM更新可能还在队列里，导致获取的DOMRectList是旧的布局状态。而伪选框不在视口时，浏览器会触发懒渲染，等元素回到视口时布局已经稳定，所以计算正常。

核心思路 #

用Svelte内置的tick()替代requestAnimationFrame，它会等待当前所有待处理的DOM更新完成后再执行，更适配Svelte的更新周期；同时给resize事件加防抖，避免频繁触发计算。

代码修改示例 #

假设你的原代码逻辑如下：

<script>
  let startEl;
  let endEl;
  let boxStyle = {};

  function updateSelectionBox() {
    requestAnimationFrame(() => {
      const startRect = startEl.getBoundingClientRect();
      const endRect = endEl.getBoundingClientRect();
      // 选框位置计算逻辑
      boxStyle = { /* 生成样式 */ };
    });
  }

  onMount(() => {
    window.addEventListener('resize', updateSelectionBox);
    return () => window.removeEventListener('resize', updateSelectionBox);
  });
</script>

<div class="selection-box" style={boxStyle}></div>
<span bind:this={startEl}>believe</span>
<!-- 中间文本内容 -->
<span bind:this={endEl}>since</span>

修改后的代码：

<script>
  import { tick } from 'svelte';
  let startEl;
  let endEl;
  let boxStyle = {};
  let resizeTimeout;

  async function updateSelectionBox() {
    // 防抖，避免resize频繁触发计算
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(async () => {
      // 等待Svelte完成DOM更新+浏览器布局重排
      await tick();
      
      const startRect = startEl.getBoundingClientRect();
      const endRect = endEl.getBoundingClientRect();
      
      // 处理单行选框位置（多行需额外遍历文本节点的getClientRects()拼接）
      const top = Math.min(startRect.top, endRect.top);
      const bottom = Math.max(startRect.bottom, endRect.bottom);
      const left = startRect.left;
      const width = endRect.left - startRect.left;

      boxStyle = {
        position: 'fixed',
        top: `${top}px`,
        left: `${left}px`,
        width: `${width}px`,
        height: `${bottom - top}px`,
        background: 'rgba(0, 122, 255, 0.2)',
        pointerEvents: 'none'
      };
    }, 100);
  }

  onMount(() => {
    window.addEventListener('resize', updateSelectionBox);
    updateSelectionBox(); // 初始化时计算一次
    return () => {
      window.removeEventListener('resize', updateSelectionBox);
      clearTimeout(resizeTimeout);
    };
  });
</script>

<div class="selection-box" style={boxStyle}></div>
<span bind:this={startEl}>believe</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
<span bind:this={endEl}>since</span> dolor sit amet...

额外注意事项 #

• 如果文本存在换行，需要遍历目标文本范围内所有节点的getClientRects()，拼接多个矩形区域来实现多行选框。
• 确保伪选框的position设为fixed，因为getBoundingClientRect()返回的是相对于视口的坐标，fixed定位可以直接对应位置。

内容的提问来源于stack exchange，提问作者Y-jiji