Question

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

IOS有人们称之为＆＃39;摩擦乐队＆＃39;有关此行为的示例，您可以查看这些GIF：

问题是，当rubber banding发生并将我的固定元素拉下来（显示其覆盖的内容）时，用户手指可能会最终覆盖正在叠加的内容。

当发生这种情况时，所有touchmove事件都不会触发覆盖屏幕但固定元素覆盖屏幕的固定元素。

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

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

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

这不是解决方案，因为一旦touchmove事件触发了叠加内容，它就会在用户从屏幕上移开手指时停止。

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

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

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

有关如何处理此事的任何想法或提示？

修改

一个简单的jsfiddle：

这仅适用于IOS，并且只有在您浏览橡皮筋所揭示的内容时才会有效。

Answer 1

在移动浏览器上处理已在其中滚动的固定元素时，确实没有一个好的解决方案。

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

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

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

然后你运气不好，需要抓住你的元素，将它从dom中移除，并在你打开fullscreen元素时尽可能地将它放在dom中。

之后，您需要将元素放回原位。我知道这样做的最好方法是留下一个占位符，供你追加/预先添加。 dom没有方法可以为您提供元素的确切位置，因此如果您不希望元素的顺序发生变化，您将被迫执行此操作。

如果您觉得可以做出改进，请随意留下对此答案的评论或建议。