出现覆盖时防止背景滚动

Question

我已经使用 css 编写了自己的模态类并在我的应用程序中成功使用了它。但是我面临的问题是当覆盖打开时我仍然可以滚动背景内容。当我的 modal/overlay 打开时，如何停止滚动背景内容？

这是我的模式，它在叠加层的顶部打开

<div>
  <div className="overlay"></div>
  {this.props.openModal ?
  <div>
    <div className="polaroid sixten allcmnt_bg_clr horiz_center2">
      {}
      <div className="mobile_header">
        <PostHeader/>
      </div>
      <div className="mobile_renderPost">
        { this.renderPostType() }
      </div>
      <div className="mobile_post_bottom"></div>
    </div>
  </div> : null}
</div>

我的叠加层css

.overlay {
  background-color: rgba(0, 0, 0, .70);
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 1;
  left: 0;
  right: 0;
  -webkit-transition: opacity .25s ease;
  z-index: 1001;
  margin: 0 auto;
}

Answer 1

当你打开模态时，你可以添加overflow: hidden;到正文的样式。

或者，

body.modal-opened {
   overflow: hidden;
}

并在打开时将 modal-opened class 添加到正文中，在关闭对话框时将其删除。

Answer 2

一种方法是隐藏正文元素的溢出。

像这样：

body.modal-open{
    overflow:hidden;
}

所以在这种情况下，当您弹出模态框时，您会向主体添加一个 class，然后当您关闭它时，您会删除 class。

另一种方法是使用 javascript 来禁用滚动，如下所示：

   document.documentElement.style.overflow = 'hidden';
   document.body.scroll = "no";

然后 return 它与

 document.documentElement.style.overflow = 'scroll';
 document.body.scroll = "yes";

Answer 3

当模式打开时，隐藏主体上的 x/y 滚动条。

.no-scroll {
    overflow: hidden;
}

使用 JavaScript 将 class 添加到正文：

<body class="no-scroll">

</body>

关闭模式后删除 class。

Answer 4

使用 JavaScript 添加一个 class 到正文

overflow:hidden;

在大多数情况下都能正常工作，但我相信 iPhone 上的 Safari 仍会由于 Touch Move 而略微滚动并出现抖动，因此需要类似的东西。

function handleTouchMove(e)
{
  e.preventDefault();
}
function lockscreen()
{
  var body = document.getElementById("body");
  body.className += " lock-screen";
  body.addEventListener('touchmove', handleTouchMove, false);
}
function unlock()
{
  var body = document.getElementById("body");
 body.classList.remove("lock-screen");
 body.removeEventListener('touchmove', handleTouchMove);
}

阻止用户继续滚动

Answer 5

我也遇到了这个问题，并尝试了将 body 元素的高度设置为 100% 或 100vh 和 overflow: hidden 的所有答案。这对我造成了一些问题，首先是使用带有 100vh 的隐藏溢出使页面在单击汉堡菜单按钮时跳到顶部。

解决方法：在html标签中添加overflow:hidden属性。这在菜单打开的地方非常有效，防止页面滚动，并保持用户在页面上的位置而不会跳转。

由于您似乎在使用 React，这里是我如何使用它的示例：

.lock-scroll {
  overflow: hidden;
}

const [open, setOpen] = useState(false)
useEffect(() => {
  const html = document.getElementsByTagName('html')[0]

  if (open) {
    html.classList.add('lock-scroll')
  } else {
    html.classList.remove('lock-scroll')
  }
  return (): void => {
    html.classList.remove('lock-scroll')
  }
}, [open])

出现覆盖时防止背景滚动

Prevent background scrolling when overlay appears

html

javascript

css

scroll

overlay