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

我有一个容器，它有

位置：固定的
，里面有滚动内容。我在移动设备上将其显示为聊天功能，但在mobile Safari上，
位置：fixed
容器内的滚动内容突然停止滚动，并开始滚动容器本身

在mobile Safari上打开此链接以查看效果：

可编辑示例如下：

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

注意：如果您在触发此错误时遇到问题，请快速上下滚动内容10秒左右，最终它将突然停止滚动。
我打开了链接（）iPhone 6-Safari，一切看起来都很好。内容按预期滚动。我试了很多次上下滚动，但什么也没发生

在哪个版本会发生这种情况？我不能说没有经验的错误，但我认为这可能是虚拟的滚动问题

您可以通过添加此来禁用此功能

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

我不太清楚这里有什么交易。可能是safari在快速移动容器时会冻结，因为它在技术上仍然按照inspector tools定义的方式移动容器，只是没有在屏幕上描绘它

您可以尝试我在inspector工具中所做的一件事，似乎可以解决这个问题，那就是逆向工程。根据您的代码尝试此更改。请注意.chat移动容器上的位置/高度/填充以及其他两个元素上的z-index/bottom/positioning

<style>
.chat-container-mobile {
position: fixed;
background-color: #EBEBEB;
padding: 15px;
display: block;
margin: 0;
top: 0px;
color: #444444;
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: calc(100vh - 50px);
padding: 75px 15px 125px;
}
.chat-mobile-header {
position: fixed;
z-index: 10;
width: 100%;
background-color: white;
color: #444444;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 15px;
font-weight: 500;
text-align: center;
top: 0;
margin: 0;
padding: 17px 0;
border-bottom: 1px solid rgba(68, 68, 68, 0.2);
}
.chat-field-mobile {
position: fixed;
width: 100%;
z-index: 10;
bottom: 0;
margin: 0px;
padding: 12px 12px 10px 10px;
background-color: #EBEBEB;
border-top: 1px solid rgba(68, 68, 68, 0.1);
}
</style>


.聊天容器手机{
位置：固定；
背景色：#ebebebeb；
填充：15px；
显示：块；
保证金：0；
顶部：0px；
颜色：#4444；
溢出：滚动；
-webkit溢出滚动：触摸；
高度：计算（100vh-50px）；
填充：75px 15px 125px；
}
.聊天手机头{
位置：固定；
z指数：10；
宽度：100%；
背景色：白色；
颜色：#4444；
文本转换：大写；
字母间距：0.04em；
字体大小：15px；
字号：500；
文本对齐：居中；
排名：0；
保证金：0；
填充：17px0；
边框底部：1px实心rgba（68,68,68,0.2）；
}
.聊天现场手机{
位置：固定；
宽度：100%；
z指数：10；
底部：0；
边际：0px；
填充：12px 12px 10px 10px；
背景色：#ebebebeb；
边框顶部：1px实心rgba（68,68,68,0.1）；
}

这样做的话，其他的元素就放在你的聊天窗口的顶部，而不是试图把你的片段堆叠在一起

希望这对你有帮助，伙计
 在iOS Safari中尝试使用
overflow:scroll
div时，我多次遇到这个问题

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

当某个容器（即窗口或滚动div）运行这些动画时，事件将锁定到该容器
当
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.preventDefault
。这首先会防止窗口对这些用户输入做出反应，不过如果需要保留浏览器默认值，这可能会导致许多其他问题

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

下次我试图解决这个问题时，我会带着任何额外的发现回来——老实说，几乎每个项目都有这个问题

祝你好运
 只需尝试将
bottom:0
添加到
.chat container mobile{bottom:0}
我刚刚在最新的6S上测试了它，无法复制它。你在测试什么？