开启平滑滚动时监听滚动事件更新DOM元素位置出现延迟弹跳问题

• 平滑滚动本质是浏览器/扩展实现的逐帧位移插值动画，scroll事件的触发优先级低于渲染帧任务，触发频率和滚动动画帧不同步，导致位置更新滞后。
• 现有代码采用增量差值计算transform偏移，每次更新依赖上一次存储的prevTop/prevLeft值，一旦某次更新滞后就会产生误差，误差累积后就表现为连续滚动时的弹跳现象。
• getBoundingClientRect()获取的是调用时刻的实时坐标，若调用时机晚于当前帧渲染，赋值的位置就会和实际滚动位置存在偏差。

方案1：对齐渲染帧更新 + 绝对偏移赋值（改动最小，兼容性好） #

将位置更新逻辑放到requestAnimationFrame回调中执行，保证和浏览器渲染节奏对齐，同时放弃增量差值计算，每次直接赋值最终偏移量，避免误差累积。优化代码如下：

let isUpdating = false;
function updateCoords(smartTip, refElement) {
  const clientRect = refElement.getBoundingClientRect();
  const [top, left] = getRightPosition(refElement);
  // 直接赋值绝对偏移，无需和上一次坐标做差值计算
  smartTip.element.style.transform = `translate(${left}px, ${top}px)`;
  smartTip.prevTop = top;
  smartTip.prevLeft = left;
}

function setOnScrollListener(element) {
  const scrollHandler = () => {
    // 避免同一帧内重复触发更新
    if (isUpdating) return;
    isUpdating = true;
    requestAnimationFrame(() => {
      const inputElements = document.getElementsByTagName("label");
      for (let i = 0; i < customElements.length; i++) {
        customElements[i].element.style.display = "inline";
        updateCoords(customElements[i], inputElements[i]);
      }
      isUpdating = false;
    });
  };
  element.addEventListener("scroll", scrollHandler, true);
}

方案2：修改DOM结构从根源避免同步（性能最优） #

直接将SVG元素作为对应label标签的子元素，通过CSS相对定位固定在目标位置，完全不需要监听scroll事件同步坐标，不会出现任何位移偏差。

方案3：使用CSS粘性定位适配特殊场景 #

如果SVG需要在滚动到特定区域时固定位置，可以使用position: sticky实现，不需要JS监听滚动，性能远优于JS同步方案。

内容的提问来源于stack exchange，提问作者Pradeep Ragav