我有一个容器有位置：固定与滚动内容里面.我将其显示为移动设备上的聊天功能,但在移动Safari上,位置内的滚动内容：固定的容器停止滚动,并开始滚动容器本身.
在手机Safari上打开此链接可查看效果：http://jsbin.com/ruyito
可编辑示例：http://jsbin.com/ruyito/edit?html,output
问题：为什么我的容器div突然开始滚动位置并停止滚动内容？ (在Android上的Chrome上,它没有问题)
解决方法
在iOS Safari中尝试使用overflow：scroll div时,我遇到了这个问题.
我的理解是,它与过卷动/弹性滚动动画有关.似乎发生的是：
>当某个容器(即窗口或滚动div)运行这些动画时,事件将锁定到该容器.
>当溢出：滚动容器点击它的滚动高度的顶部/底部,然后开始滚动父容器 – Chrome的情况也是如此.
您可能会注意到,在您的示例中,当滚动停止工作时,不要少量时间(例如500ms？)触摸屏幕,然后再次尝试滚动工作.
我认为发生的是当你点击滚动容器的底部/顶部时,事件被锁定到父进程,在这种情况下是窗口.当您在这种状态下继续互动时,您的事件永远不会使其成为您的滚动容器,因此它似乎没有反应.
过去,我已经取得了一些成功,不会将滚动容器中的触摸事件传播到文档：
$('.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进行这些触摸事件.这可以防止窗口首先对这些用户输入做出反应,但是如果您需要保留浏览器默认值,则可能会导致许多其他问题.
还尝试本地化这些绑定只有在这是一个问题的情况.所以在绑定到事件之前检查iOS和Safari.
下一次我试图处理这个问题时,我会再回来一些额外的结果,其实我们几乎是每一个项目.
祝你好运！
