IOS防止touchmove事件被固定元素后面的body捕获

Question

我有一个固定元素覆盖整个屏幕并需要滚动。

IOS 有人们所谓的“摩擦带”作为这种行为的示例，您可以查看这些 gif：

http://blog.christoffer.me/six-things-i-learnt-about-ios-safaris-rubber-band-scrolling/

问题在于，当rubber banding 发生并将我的固定元素拉下（显示它覆盖的内容）时，用户的手指有可能最终落在被覆盖的内容上。

当这种情况发生时，所有touchmove 事件将不会在覆盖屏幕的固定元素上触发，而是在我的固定元素覆盖的主体上触发。

我知道你可以像这样阻止正文滚动：

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

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

这不是解决方案，因为一旦 touchmove 事件在覆盖的内容上触发一次，只有当用户将手指从屏幕上移开时它才会停止。

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

即使在橡皮筋发生后元素弹回原位，touchmove 事件仍会卡在 body 元素上，直到用户将手指从屏幕上移开。

我很迷茫在这里做什么。以某种方式禁用 body 的 touchmove 事件似乎是个好主意，但我的固定元素在里面，它仍然需要滚动功能。

关于如何处理此问题的任何想法或提示？

编辑：

一个简单的jsfiddle：

https://jsfiddle.net/pq88zLLx/1/

这仅适用于 IOS，并且仅当您滑入橡皮筋所显示的内容时。

Answer 1

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

我没有测试过除 Safari 之外的其他浏览器，但我了解到其他浏览器也不太喜欢这种组合。

最好和最灵活的解决方案是使您的full screen 元素absolute 定位。这将解决滑动和定位的常见问题。

但是如果我的元素在 relative 容器中呢？

那么你运气不好，需要抓住你的元素，将它从 dom 中移除，并在打开 fullscreen 元素时将它放在 dom 中尽可能高的位置。

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

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