Javascript 打开模态视图时禁用身体滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29897300/
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
disable scroll on body when modal view is opened
提问by Hirohito Yamada
I am creating this website and when you click at link at the far right-end of the second row of the header, modal window shows up with youtube videos embedded.
我正在创建这个网站，当您单击标题第二行最右端的链接时，模态窗口会显示嵌入的 youtube 视频。
When I scroll through the modal, BODY will also scroll and I would like to stop that. How could I do that?
当我滚动模式时，BODY 也会滚动，我想停止滚动。我怎么能那样做？
Help will be much appreciated! Thank you for your time.
帮助将不胜感激！感谢您的时间。
回答by IvanJ
In your CSS add the following rule:
在您的 CSS 中添加以下规则：
body.modal-open {
overflow: hidden;
}
body.modal-open {
overflow: hidden;
}
Also, use some jQuery so that when modal is open you add .modal-openclass to <body>tag, and when it is closed you remove it.
此外，使用一些 jQuery，以便在模式打开时将.modal-open类添加到<body>标签，并在关闭时将其删除。
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});
回答by Michael Norward
In the other fixes that I've seen so far, where they were trying to apply fixed positioning on the "BODY" tag when modal gets opened, the document is scrolled at the very top, since the default is to have it positioned at top 0. I tried this and found out that the best solution is to apply overflow hidden on the html tag and not on the body tag. This way we won't need any fixed positioning and you will get to keep the document staying on where it was at before modal was opened.
在我到目前为止看到的其他修复中，当打开模态时，他们试图在“BODY”标签上应用固定定位，文档在最顶部滚动，因为默认是将它定位在顶部0. 我尝试了这个，发现最好的解决方案是应用隐藏在 html 标签上的溢出而不是 body 标签。这样我们就不需要任何固定的定位，并且您可以将文档保持在打开模态之前的位置。
In the fix that I found you just need to apply something like
在我发现的修复中，您只需要应用类似
function openModal(){
$("html").css({"overflow-y":"hidden"})
// open your modal box function in this area...
}
and that's the fix. You may go ahead and create a CSS class and just toggle the class on HTML when opening or closing the modal box. But this has surely fixed the problem for me
这就是解决办法。您可以继续创建一个 CSS 类，并在打开或关闭模式框时在 HTML 上切换该类。但这确实为我解决了问题
回答by ifadey
You can prevent scrolling of any DOM element by setting its overflow CSS property to hidden and position fixed. For example:
您可以通过将任何 DOM 元素的溢出 CSS 属性设置为隐藏和位置固定来防止滚动。例如：
.disable-scroll {
/* disable scrollbar on both x and y axis */
overflow: hidden;
/* disable scrollbar on x-axis only */
overflow-x: hidden;
/* disable scrollbar on y-axis only */
overflow-y: hidden;
/* disable scroll */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* OPTIONAL: none of dom element will be click-able */
pointer-events: none;
}
回答by lifeiscontent
I would set the html and body tags to overflow: hidden;this way the user can't scroll.
我会将 html 和 body 标签设置为overflow: hidden;用户无法滚动的方式。
however, if the contents of your modal are very large I would recommend having a scrollable container for the modal. You can see an example of what I'm talking about here: http://fortitude.io/javascript.html#js-modal
但是，如果您的模态内容非常大，我建议您为模态设置一个可滚动的容器。你可以看到我在这里谈论的一个例子：http: //fortitude.io/javascript.html#js-modal
回答by lofihelsinki
Simple overflow: hidden;doesn't cut it for Chrome or Firefox. Using position: fixed;works, but as a side-effect can make the screen jump when closing the modal.
简单overflow: hidden;并不适用于 Chrome 或 Firefox。使用position: fixed;作品，但作为一个副作用可以使关闭模态时屏幕跳转。
This will hide the scrollbar for both Chrome And FF
这将隐藏 Chrome 和 FF 的滚动条
.modal-open {
-moz-appearance: menuimage;
}
.modal-open::-webkit-scrollbar {
width: 0 !important;
}
However, this will only disable the scrollbar, scrolling is still possible with keypresses / text selection / touch gestures.
但是，这只会禁用滚动条，仍然可以通过按键/文本选择/触摸手势进行滚动。
One possibility is to set the height of elements inside body to zero, for example all divs
一种可能性是将 body 内元素的高度设置为零，例如所有 div
.modal-open div {
height: 0px;
}
