缩放时如何在IOS浏览器上定位固定位置的元素？

Question

我有一个不错的小React drag-drop 库，适用于鼠标和触摸系统。对于触摸，它通过clientX 和clientY (e.targetTouches[0].clientX, e.targetTouches[0].clientY) 获取触摸位置。它使用这些坐标来放置具有position: fixed 的拖动元素。

然而事实证明，至少在 IOS Safari (v.11.x) 上，当您缩放显示时，position:fixed 的坐标系不再与窗口坐标系匹配。所以被拖拽的元素显示在页面的错误位置。

将放大的浏览器窗口想象成一个小矩形视图，放在一个包含未缩放内容的较大矩形上。 location:fixed 坐标系使用较大的矩形。窗口坐标系使用小坐标系。

当您滚动时，窗口会以难以描述的方式围绕较大的矩形平移，结果是位置固定区域中的 0,0 和浏览器窗口中的 0,0 之间的偏移量总是在变化。

如何获取浏览器窗口和“位置：固定”坐标系之间的偏移量？ （然后我可以将该偏移量添加到拖动元素的位置以正确定位它。）

Answer 1

在 0,0 处粘贴一个元素，位置：固定。

使用getBoundingClientRect() 获取浏览器窗口的 x/y 偏移量。

然后删除元素。

function getFixedOffset() {
    let fixedElem = document.createElement('div');
    fixedElem.style.cssText = 'position:fixed; top: 0; left: 0';
    document.body.appendChild(fixedElem);
    const rect = fixedElem.getBoundingClientRect();
    document.body.removeChild(fixedElem);
    return [rect.left, rect.top]
}

这可行（耶！）但感觉很笨拙，每次用户拖放时创建然后销毁一个 DOM 元素。欢迎提出其他建议。