如何在缩放时在IOS浏览器上定位固定位置元素？
我有一个很好的小React拖放库，适用于鼠标和触摸系统。 对于触摸，它通过clientX和clientY （ e.targetTouches[0].clientX, e.targetTouches[0].clientY ）抓取触摸位置。 它使用这些坐标放置拖动的元素，其position: fixed 。
然而事实certificate，至少在IOS Safari（v.11.x）上，当您缩放显示时， position：fixed的坐标系统不再与窗口坐标系匹配 。 因此，拖动的元素显示在页面上的错误位置。
将放大的浏览器窗口视图为包含未缩放内容的较大矩形的小矩形视图。 位置：固定坐标系使用较大的矩形。 窗口坐标系使用小坐标系。
当您滚动时，窗口以难以描述的方式围绕较大的矩形平移，结果是位置固定的0,0和浏览器窗口中的0,0之间的偏移总是在变化。
如何获得浏览器窗口和“位置：固定”坐标系之间的偏移？ （然后我可以将该偏移量添加到拖动元素的位置以正确定位它。）
将元素粘贴在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元素。 其他建议是受欢迎的。