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

Question

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

IOS 有人们所说的“摩擦 strip ”作为这种行为的一个例子，你可以看看这些 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 事件在叠加内容上触发一次，只有当用户将手指从屏幕上移开时，它才会停止。

简而言之，用户可能会滚动我的固定元素，到达顶部使橡皮筋踢进去并在 body 而不是固定元素上滑动，因为橡皮筋会露出 body 。

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

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

关于如何处理这个问题有什么想法或提示吗？

编辑:

一个简单的 jsfiddle:

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

这仅在 IOS 上有效，并且仅当您滑入橡皮筋显示的内容时。

Answer 1

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

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

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

But what if my element is in a relative container?

然后你就倒霉了，需要捕获你的元素，将它从 dom 中移除，并在你打开 fullscreen 时将它放在 dom 中尽可能高的位置。元素。

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

如果您觉得可以做出改进，请随时对此答案发表评论或建议。