防止模式屏幕在移动 Safari 中滚动答案

【问题标题】：Prevent modal screen from scrolling in mobile safari防止模式屏幕在移动 Safari 中滚动
【发布时间】：2015-06-17 20:05:39
【问题描述】：

我正在处理一个移动页面，当用户面向横向模式时，我想在该页面上显示类似模式的屏幕。我正在使用一个 div，基本上让它覆盖了屏幕，但问题是在 safari 中，用户可以滚动到 div 的顶部或底部，它会使屏幕向上滑动并显示它下面的内容，然后反弹回来。

它的 css 看起来像这样

{
  div {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
}

我已经阅读了可以在正文中禁用此功能但不能在其他元素中禁用的答案。这是否可以在特定 div 上禁用这种奇怪的滚动效果，或者是否有解决方法？

【问题讨论】：

能否添加接近真实情况的工作代码sn-p？

标签： javascript html css mobile-safari

【解决方案1】：

您的 CSS 无效，但您已关闭。实现您希望的实际 CSS 如下所示：

div {
    height: 100%;
    width: 100%;
    /* only the y axis (up down) has scroll and we only want that when the contents go out of bounds so the proper css property and value is to disable all scrolling just use the autoflow prop */
    overflow-y: hidden; 
  }

【讨论】：

【解决方案2】：

试试：

div {
    height: 100%;
 width: 100%;
overflow: hidden; 
position:fixed;
 }

【讨论】：