Question

我有一个响应式webapp，它包含一个可滚动的主体（没有滚动容器）和一个模态（对话框）。当隐藏模态时，我需要正文保持可滚动，以便在我向下滚动移动设备上的页面时自动隐藏URL栏。和其他许多人一样，我希望在显示模态时从主体“移除”滚动，但是我仍然希望能够在模态中滚动。所以我很容易通过在body上隐藏一个noScroll类来修复：隐藏。

.noScroll { 
  overflow: hidden; //does not remove overscroll 
}

但是这不会完全删除滚动。 iOS过度滚动/弹跳效果仍在身上发生。我尝试设置position：在noScroll类中修复，但我没有100％工作。

.noScroll { 
  overflow: hidden; //does not remove overscroll 
  position: fixed; //does not work a 100% 
}

这段代码也是一样的（它比position：fixed更好一点）：

$(document).on("touchmove", function (event) {
    if($(#modal).is('visible')
        event.preventDefault();
});

$('#modal').on("touchmove", function (event) {
    event.stopPropagation();
});

问题是过度滚动/反弹效果仍在模态上发生（模式显示在页面顶部）。似乎我能够通过模态触发“页面滚动”，即使从主体或文档中删除滚动也是如此。发生这种情况时，无法在模态内滚动。然后我必须点击或点击它真的很难再次滚动它。

最后，我的问题：是否可以一次性完成所有操作：

默认情况下有一个可滚动的正文，以便在我向下滚动时隐藏网址栏
在显示可滚动模式时删除“pgae scroll”
防止模式中的过度滚动
将模态保持在顶部

我也很满意只是解释为什么会这样。

注意：这适用于android / chrome。

编辑主要问题是我必须双击模式，或者在可以再次滚动它之前点击它。

在Body和可滚动子容器上防止iOS过度滚动/跳出效果？

0 个答案: