Javascript IOS防止固定元素后面的主体捕获touchmove事件

我有一个固定的元素，它覆盖了整个屏幕，需要滚动

IOS有人们称之为“摩擦带”的功能。作为这种行为的一个例子，你可以看看这些GIF：

问题是，当出现

橡皮筋时，

会将我的固定元素拉下来（显示它覆盖的内容），用户的手指可能会碰到正在覆盖的内容

发生这种情况时，所有

touchmove

事件将不会在覆盖屏幕的固定元素上触发，而是在覆盖固定元素的主体上触发

我知道你可以防止身体像这样滚动：

body.noscroll{
    position:fixed;
    overflow:hidden;
}

但这是一个防止滚动的解决方案

这不是解决方案，因为一旦在覆盖内容上触发了

touchmove

事件一次，只有当用户将手指从屏幕上移开时才会停止

简而言之，用户可能会滚动“我的固定元素”，到达顶部使橡皮筋插入并在身体上而不是固定元素上滑动，因为橡皮筋显示身体

即使在橡皮筋绑好后元件弹回到原位，

touchmove

事件仍会卡在车身元件上，直到用户将手指从屏幕上移开

我真不知道在这里该做什么。不知何故，禁用身体的

touchmove

事件似乎是个好主意，但我的固定元素在里面，它仍然需要滚动能力

关于如何处理这个问题有什么想法或建议吗

编辑：

简单的JSFIDLE：

---

不过，这只在IOS上有效，而且只有当你浏览到橡皮筋显示的内容时才有效。

在移动浏览器上，对于处理内部有滚动的固定元素，确实没有一个好的解决方案

除了Safari，我还没有测试过其他浏览器，但我知道其他浏览器也不太喜欢这种组合

最好、最灵活的解决方案是使您的

全屏
元素
绝对
定位。这将解决刷卡和定位的常见问题

但是，如果我的元素位于
相对的
容器中，该怎么办

那么您就不走运了，需要抓取您的元素，将其从dom中删除，并在打开
全屏
元素时尽可能将其放在dom中的最高位置

之后，您需要将元素放回其原始位置。据我所知，最好的方法是留下一个占位符供您附加/前置。dom没有方法为您提供元素的确切位置，因此，如果您不想更改元素的顺序，则必须这样做

如果您觉得可以改进，请随时在此答案上留下评论或建议