html - 在移动 Safari 上的固定位置 div 内滚动内容突然停止——并开始滚动容器本身

Question

我有一个容器，它有 position:fixed，里面有滚动内容。我将此显示为移动设备上的聊天功能，但在移动 Safari 上，position:fixed 容器内的滚动内容突然停止滚动并开始滚动容器本身。

在手机Safari上打开此链接查看效果:http://jsbin.com/ruyito

此处可编辑示例:http://jsbin.com/ruyito/edit?html,css,output

问题:为什么我的容器 div 突然开始滚动它的位置并停止滚动内容？ (在 Android 上的 Chrome 上，它可以正常工作)

注意:如果您无法触发此错误，请快速上下滚动内容 10 秒左右，最终它会突然停止滚动。

Answer 1

当我尝试在 iOS Safari 中使用 overflow: scroll div 时，我曾多次遇到这个问题。

我的理解是它与过度滚动/flex 滚动动画有关。似乎发生的是:

1. 当某个容器(即窗口或您的滚动 div)正在运行这些动画时，事件将锁定到那个容器。
2. 当 overflow: scroll 容器到达其滚动高度的顶部/底部时，它会开始滚动父容器 - Chrome 中也是如此。

您可能会在您的示例中注意到，当滚动停止工作时，在一小段时间(例如 500 毫秒？)内不触摸屏幕然后尝试再次滚动工作。

我认为正在发生的事情是，当您点击滚动容器的底部/顶部时，事件将锁定到父级，在本例中为窗口。当您继续在此状态下进行交互时，您的事件永远不会到达您的滚动容器，因此它看起来没有响应。

过去我通过不将触摸事件从我的滚动容器传播到文档而取得了一些成功:

$('.chat-container-mobile').on({
    'touchstart': _onTouchStart,
    'touchmove': _onTouchMove,
    'touchend': _onTouchEnd
});

function _onTouchStart(e) {

    e.stopPropagation();
}

function _onTouchMove(e) {

    e.stopPropagation();
}

function _onTouchEnd(e) {

    e.stopPropagation();
}

注意:在很多情况下这都不是解决方法，因为您经常需要保留默认的窗口行为。但是在这种情况下，您似乎有一个固定的布局，不需要默认的文档滚动行为。此外，如果您尝试通过触摸顶部的“群聊”栏或底部的“输入消息”栏进行滚动，然后很快尝试在您的容器内滚动，您可能仍会看到相同的结果。

您也可以尝试在 $(document) 上使用 e.preventDefault 来处理这些触摸事件。这首先会阻止窗口对这些用户输入使用react，尽管如果您需要保留浏览器默认值，这可能会导致许多其他问题。

也尝试仅在出现问题的情况下本地化这些绑定(bind)。因此，在绑定(bind)到事件之前检查 iOS 和 Safari。

下次我尝试处理这个问题时，我会带着任何额外的发现回来——老实说，几乎每个元素都是如此。

祝你好运!