在 Mobile Safari 中停止正文滚动

Question

我试图在模式叠加层打开时阻止页面主体滚动（完全）。

模态框覆盖整个屏幕（{position: fixed;top:0;left:0;right:0;bottom:0;}），并且有自己的滚动功能。但是，当我在模态窗口上运行到滚动结束时，主窗口开始在它后面滚动。我已经尝试了所有我能想到的让身体停止滚动的方法。这些事情没有奏效：

CSS

body {
    overflow: hidden;
    pointer-events: none;
    -webkit-overflow-scrolling: none;
}
#content { /* which contains all the non-modal content of the body */
    -webkit-transform: scale(0);
    position: relative; left: 100%;
}

• 使用 iScroll
• 阻止窗口或正文的滚动事件
• 阻止 body 上的 touchstart 事件

Answer 1

看起来你已经很接近了。

当你的模式打开时，试试这个 CSS：

body{
    overflow:visible;
    max-height:100%; /* or 100px or something smaller than the screen if your viewport isn't set */
    height:100% /* or 100px or something smaller than the screen */
}