javascript 出现叠加层时防止背景滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47918560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent background scrolling when overlay appears
提问by CraZyDroiD
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?
我已经使用 css 编写了自己的模态类，并成功地在我的应用程序中使用了它。然而，我面临的问题是当覆盖层打开时，我仍然可以滚动背景内容。当我的模态/叠加层打开时，如何停止滚动背景内容？
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>
my overlay css
我的叠加 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;
}
回答by M.R.Safari
One approach is hidden the overflow of the body element.
一种方法是隐藏 body 元素的溢出。
like this:
像这样：
body.modal-open{
overflow:hidden;
}
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.
所以在这种情况下，当您弹出模态时，您将一个类添加到正文，然后当您关闭它时，您将删除该类。
another approach is using a javascript to disable the scroll like this:
另一种方法是使用 javascript 禁用滚动，如下所示：
document.documentElement.style.overflow = 'hidden';
document.body.scroll = "no";
and then return it with
然后返回它
document.documentElement.style.overflow = 'scroll';
document.body.scroll = "yes";
回答by adeltahir
When you open the modal, you can add overflow: hidden;to the body's style.
当您打开模态时，您可以添加overflow: hidden;到正文的样式。
Or,
或者，
body.modal-opened {
overflow: hidden;
}
And add modal-openedclass to the body when opening and remove when you close the dialog.
并modal-opened在打开时将类添加到正文中，并在关闭对话框时将其删除。
回答by Get Off My Lawn
When the modal opens, hide the x/y scroll bars on the body.
当模态打开时，隐藏身体上的 x/y 滚动条。
.no-scroll {
overflow: hidden;
}
Using JavaScript add the class to the body:
使用 JavaScript 将类添加到主体：
<body class="no-scroll">
</body>
Once you close the modal remove the class.
关闭模态后，请删除该类。
回答by Austin Jones
Using JavaScript to add a class to the body with
使用 JavaScript 向主体添加一个类
overflow:hidden;
will work in most cases, but I beleive Safari on iPhone will still scroll slightly with jitter due to Touch Move and something like this will be needed.
在大多数情况下都可以工作，但我相信 iPhone 上的 Safari 仍然会因触摸移动而轻微滚动并带有抖动，并且需要类似的东西。
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);
}
to stop the user from still scrolling
阻止用户继续滚动
