出现叠加时防止背景滚动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了出现叠加时防止背景滚动相关的知识，希望对你有一定的参考价值。
我已经使用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.modal-open{
overflow:hidden;
}
因此，在这种情况下，当您弹出模态时，您将一个类添加到body，然后当您关闭它时，您将删除该类。
另一种方法是使用javascript来禁用滚动，如下所示：
document.documentElement.style.overflow = 'hidden';
document.body.scroll = "no";
然后用它返回
document.documentElement.style.overflow = 'scroll';
document.body.scroll = "yes";
另一答案
打开模态时，可以将overflow: hidden;添加到主体的样式中。
要么，
body.modal-opened {
overflow: hidden;
}
并在打开时将modal-opened类添加到正文，并在关闭对话框时删除。
另一答案
打开模态时，隐藏正文上的x / y滚动条。
.no-scroll {
overflow: hidden;
}
使用JavaScript将类添加到正文：
<body class="no-scroll">
</body>
关闭模态后，删除该类。
另一答案
使用JavaScript将类添加到正文中
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);
}
阻止用户滚动
以上是关于出现叠加时防止背景滚动的主要内容，如果未能解决你的问题，请参考以下文章