出现叠加时防止背景滚动 [英] Prevent background scrolling when overlay appears

问题描述

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

I have written my own modal classes using css and have used it in my application successfully. However the issue i'm facing is when the overlay is open i can still scroll the background contents. How can i stop scrolling background contents when my modal/overlay is open?

这是我在叠加层顶部打开的模态

This is my modal which opens on top of the 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;
}

推荐答案

一种方法是隐藏溢出身体元素。

One approach is hidden the overflow of the body element.

像这样：

body.modal-open{
    overflow:hidden;
}

因此在这种情况下，当您弹出模态时，您将一个类添加到body和然后当你关闭它时你删除那个类。

so in this case when you popup the modal you add a class to body and then when you close it you remove that class.

另一种方法是使用javascript来禁用这样的滚动：

another approach is using a javascript to disable the scroll like this:

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

然后返回

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

这篇关于出现叠加时防止背景滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！