在Mobile Safari中停止正文滚动

时间:2013-12-16 20:03:35

标签: css scroll mobile-safari

我正在尝试阻止我的页面正文滚动(根本没有),同时打开模态叠加层。

模态覆盖整个屏幕({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
  • 阻止窗口或正文的滚动事件
  • 阻止正文上的touchstart事件

1 个答案:

答案 0 :(得分:0)

看起来你非常接近。

当你的模态打开时,试试这个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 */
}