Javascript 如何在当前google chrome的可视视口中获取客户端矩形？

我创建了一个脚本，将覆盖分配给单击的元素：

(() => {
  const d = document.body.appendChild(document.createElement("div"));
  Object.assign(d.style, {
    position: "absolute",
    backgroundColor: "black",
    opacity: "0.3",
    transition: "500ms",
  });
  window.addEventListener("click", ({ target }) => {
    const rect = target.getBoundingClientRect();
    Object.assign(d.style, {
      top: `${rect.top + scrollY}px`,
      left: `${rect.left + scrollX}px`,
      width: `${rect.width}px`,
      height: `${rect.height}px`,
    });
  });
})();

如果Google Chrome被压缩缩放，这个覆盖就不能正常工作

因为

scrollX

/

scrollY

是视觉视口偏移，而

getBoundingClientRect

/

GetClientRect

是布局视口左上角的相对坐标。我知道这些视口在Google Chrome pinched zoom中是不同的

我需要上面脚本的下一个坐标之一正常工作：

客户端矩形，是视觉视口左上角的相对坐标

布局视口偏移

从布局视口左上角开始的可视视口的相对坐标

我使用根元素的rect实现了“布局视口偏移”：

function getLayoutViewportOffsets() {
  const rootRect = document.documentElement.getBoundingClientRect();
  return { y: - rootRect.top, x: - rootRect.left };
}
function getVisualViewportOffsets() {
  return { y: window.scrollY, x: window.scrollX };
}
function getBoundingClientRectFromRoot(element) {
  const layoutVpOffsets = getLayoutViewportOffsets();
  const layoutVpRect = element.getBoundingClientRect();
  return {
    top: layoutVpRect.top + layoutVpOffsets.y,
    bottom: layoutVpRect.bottom + layoutVpOffsets.y,
    left: layoutVpRect.left + layoutVpOffsets.x,
    right: layoutVpRect.right + layoutVpOffsets.x,
    height: layoutVpRect.height,
    width: layoutVpRect.width,
  };
}
function getBoundingClientRectFromVisualViueport(element) {
  const absoluteRect = getBoundingClientRectFromRoot(element);
  const visualVpOffsets = getVisualViewportOffsets();
  return {
    top: absoluteRect.top - visualVpOffsets.y,
    bottom: absoluteRect.bottom - visualVpOffsets.y,
    left: absoluteRect.left - visualVpOffsets.x,
    right: absoluteRect.right - visualVpOffsets.x,
    height: absoluteRect.height,
    width: absoluteRect.width,
  };
}