Question

我有一个容器，里面有滚动内容position:fixed。我在移动设备上将其显示为聊天功能，但在移动设备上，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时，我多次遇到此问题。

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

当某个容器（即窗口或滚动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();
}

注意：在许多情况下，这不会是修复，因为您经常需要保留默认窗口行为。但在这种情况下，您似乎有一个固定的布局，不需要默认的文档滚动行为。此外，如果您尝试通过触摸顶部＆＃39;群组聊天来滚动，您可能仍会看到相同的结果。栏或底部＆＃39;输入消息＆＃39;吧，然后很快就尝试在你的容器内滚动。

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

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

下次我尝试处理这个问题时，我会再回来找出任何额外的调查结果 - 诚然，这几乎是每个项目。

Answer 2

尝试将bottom:0添加到.chat-container-mobile { bottom:0 }

Answer 3

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

这会发生在哪个版本？如果没有经验，我无法说出任何错误，但我认为这可能是虚拟滚动问题。

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

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

Answer 4

我不太清楚这笔交易是什么。可能是safari在快速移动时会冻结，因为它在技术上仍然可以通过检查器工具定义移动容器，只是不会在屏幕上描绘它。

你可以尝试我在检查工具中做的一件事，似乎解决了这个问题，就是逆向工程你所拥有的东西。尝试对您的代码进行此更改。注意.chat-container-mobile上的定位/高度/填充和其他两个元素上的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>

这样做，其他元素只是放在聊天窗口的顶部，而不是试图堆叠或强制你的作品。

希望这有助于交配！

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

4 个答案: