我已经使用 css 编写了自己的模态类,并成功地在我的应用程序中使用了它。但是我面临的问题是当覆盖打开时我仍然可以滚动背景内容。当我的模式/叠加层打开时,如何停止滚动背景内容?
这是我的模式,它在叠加层的顶部打开
<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;
}
最佳答案
一种方法是隐藏 body 元素的溢出。
像这样:
body.modal-open{
overflow:hidden;
}
所以在这种情况下,当您弹出模式时,您将一个类添加到正文中,然后当您关闭它时,您将删除该类。
另一种方法是使用 javascript 来禁用滚动,如下所示:
document.documentElement.style.overflow = 'hidden';
document.body.scroll = "no";
然后返回
document.documentElement.style.overflow = 'scroll';
document.body.scroll = "yes";
关于javascript - 出现覆盖时防止背景滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47918560/