Question

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

但是事实证明，至少在IOS Safari（v.11.x）上，当缩放显示时， position：fixed的坐标系不再与窗口坐标系匹配。因此，拖动的元素在页面上显示在错误的位置。

将放大的浏览器窗口以小矩形图的形式显示在包含未缩放内容的较大矩形上。 location：固定坐标系使用较大的矩形。窗口坐标系使用小坐标系。

滚动时，窗口以难以描述的方式围绕较大的矩形平移，结果固定位置的0,0与浏览器窗口中的0,0之间的偏移始终在变化。

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

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元素。欢迎其他建议。

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

1 个答案: