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

Question

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

在移动版Safari上打开此链接以查看效果:http://jsbin.com/ruyito

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

问题:为什么我的容器div开始突然滚动它的位置并停止滚动内容？(在Android上的Chrome上,它没有问题)

注意:如果您在触发此错误时遇到问题,请继续快速上下滚动内容10秒左右,最终会突然停止滚动.

Answer 1

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

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

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();
}

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

您也可以尝试将e.preventDefaulton$(document)用于这些触摸事件。这首先会阻止窗口对这些用户输入做出反应，尽管如果您需要保留浏览器默认值，这可能会导致许多其他问题。

还尝试仅在出现问题的情况下本地化这些绑定。所以在绑定到事件之前检查 iOS 和 Safari。

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

祝你好运！

Answer 2

我打开链接（http://jsbin.com/ruyito）iPhone 6 - Safari，一切看起来都很好。内容按预期滚动。我尝试了多次上下滚动但没有任何反应。

哪个版本会出现这种情况？如果没有经历过这个错误，我就不能说什么，但我认为这可能是虚拟滚动问题。

您可以通过添加它来禁用它。

.chat-container-mobile {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}