CSS:如何防止在iOS Safari上滚动?

Hen*_*Zhu 19 html css modal-dialog mobile-safari

我创建了一个模态.当模态打开时,我将停止桌面上的滚动overflow:hidden;<body>.它正在发挥作用.

但它不适用于我的iPhone 6s Mobile Safari.

如何在移动野生动物园中打开模态时阻止滚动?

mat*_*den 28

结合它 position: fixed在iOS上执行此操作...

overflow: hidden;
position: fixed;
Run Code Online (Sandbox Code Playgroud)

  • 抱歉复活旧线程,但只有在页面一直滚动到顶部时触发模态时,此答案才有效.如果页面完全向下滚动,那么设置"position:fixed"会在触发模态之前将您滚动回顶部,而不是让您离开触发模态时的位置.有解决方案吗? (13认同)

小智 27

没有(据我所知)使用CSS实现这一目标的好方法,而不会影响用户体验.

虽然它是Javascript,而不是CSS,我发现这样做的最好方法如下:

// Disable scrolling.
document.ontouchmove = function (e) {
  e.preventDefault();
}

// Enable scrolling.
document.ontouchmove = function (e) {
  return true;
}
Run Code Online (Sandbox Code Playgroud)

  • 此解决方案的一个问题是,当您将其与可滚动模式一起使用时,它将禁用模式内部的滚动 (3认同)
  • 在Iphone 7上进行了测试。这不起作用。 (2认同)