jQuery 在弹出窗口处于活动状态时禁用滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19701289/
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 scrolling while popup active
提问by arifix
I created a jQuery popup by following an online tutorial (http://uposonghar.com/popup.html).
我按照在线教程 ( http://uposonghar.com/popup.html)创建了一个 jQuery 弹出窗口。
Due to my low knowledge on jQuery I am not able to make it work as of my requirements.
由于我对 jQuery 知之甚少，我无法使其按照我的要求工作。
My problem:
我的问题：
- I want to disable scroll of webpage while popup is active.
- Background fade color of popup while active is not working on full webpage.
- 我想在弹出窗口处于活动状态时禁用网页滚动。
- 活动时弹出窗口的背景淡出颜色不适用于整个网页。
CSS:
CSS：
body {
background: #999;
}
#ac-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
#popup{
width: 555px;
height: 375px;
background: #FFFFFF;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 150px; left: 375px;
}
JavaScript:
JavaScript：
<script type="text/javascript">
function PopUp(){
document.getElementById('ac-wrapper').style.display="none";
}
</script>
HTML:
HTML：
<div id="ac-wrapper">
<div id="popup">
<center>
<p>Popup Content Here</p>
<input type="submit" name="submit" value="Submit" onClick="PopUp()" />
</center>
</div>
</div>
<p>Page Content Here</p>
采纳答案by SidOfc
A simple answer, which you could use and would not require you to stop the scroll event would be to set the position of your #ac-wrapperfixed.
一个简单的答案，您可以使用并且不需要您停止滚动事件是设置您的#ac-wrapper固定位置。
e.g.
例如
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
this will keep the container of the popup always visible (aligned top - left) but would still allow scrolling.
这将使弹出窗口的容器始终可见（对齐左上角）但仍允许滚动。
But scrolling the page with a popup open is BAD!!! (almost always anyway)
但是在打开弹出窗口的情况下滚动页面很糟糕！！！（无论如何几乎总是）
Reason you would not want to allow scrolling though is because if your popup isn't fullscreen or is semi transparent, users will see the content scroll behind the popup. In addition to that, when they close the popup they will now be in a different position on the page.
您不想允许滚动的原因是因为如果您的弹出窗口不是全屏或半透明的，用户将看到弹出窗口后面的内容滚动。除此之外，当他们关闭弹出窗口时，他们现在将位于页面上的不同位置。
A solution is that, when you bind a clickevent in javascript to display this popup, to also add a class to the body with essentially these rules:
一个解决方案是，当您click在 javascript 中绑定一个事件以显示此弹出窗口时，还要使用基本上这些规则向正文添加一个类：
.my-body-noscroll-class {
overflow: hidden;
}
Then, when closing the popup by triggering some action or dismissing it with a click, you simply remove the class again, allowing scroll after the popup has closed.
然后，当通过触发某些操作或单击关闭它来关闭弹出窗口时，您只需再次删除该类，在弹出窗口关闭后允许滚动。
If the user then scrolls while the popup is open, the document will not scroll. When the user closes the popup, scrolling will become available again and the user can continue where they left off :)
如果用户在弹出窗口打开时滚动，则文档不会滚动。当用户关闭弹出窗口时，滚动将再次可用，用户可以从上次停止的地方继续:)
回答by Kenji Elzerman
To disable scrollbar:
要禁用滚动条：
$('body').css('overflow', 'hidden');
This will hide the scrollbar
这将隐藏滚动条
Background-fade-thing:
背景淡入淡出的东西：
I created my own popup-dialog-widget that has a background too. I used the following CSS:
我创建了自己的 popup-dialog-widget，它也有背景。我使用了以下 CSS：
div.modal{
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9998;
background-color: #000;
display: none;
filter: alpha(opacity=25); /* internet explorer */
-khtml-opacity: 0.25; /* khtml, old safari */
-moz-opacity: 0.25; /* mozilla, netscape */
opacity: 0.25; /* fx, safari, opera */
}
回答by BDR
I had a similar problem; wanting to disable vertical scrolling while a "popup" div was displayed.
我有一个类似的问题；想要在显示“弹出”div 时禁用垂直滚动。
Changing the overflow property of the bodydoes work, but also mess with the document's width.
更改溢出属性body确实有效，但也会弄乱文档的宽度。
I opted jquery to solve this using and used a placeholder for the scrollbar.
This was done without binding to the scrollevent, ergo this doesn't change your scrollbar position or cause flickering :)
我选择 jquery 来解决这个问题，并为滚动条使用了占位符。这是在没有绑定到scroll事件的情况下完成的，因此这不会改变您的滚动条位置或导致闪烁:)
HTML:
HTML：
<div id="scrollPlaceHolder"></div>
CSS:
CSS：
body,html
{
height:100%; /*otherwise won't work*/
}
#scrollPlaceHolder
{
height:100%;
width:0px;
float:right;
display: inline;
top:0;
right: 0;
position: fixed;
background-color: #eee;
z-index: 100;
}
Jquery:
查询：
function DisableScrollbar()
{
// exit if page can't scroll
if($(document).height() == $('body').height()) return;
var old_width = $(document).width();
var new_width = old_width;
// ID's \ class to change
var items_to_change = "#Banner, #Footer, #Content";
$('body').css('overflow-y','hidden');
// get new width
new_width = $(document).width()
// update width of items to their old one(one with the scrollbar visible)
$(items_to_change).width(old_width);
// make the placeholder the same width the scrollbar was
$("#ScrollbarPlaceholder").show().width(new_width-old_width);
// and float the items to the other side.
$(items_to_change).css("float", "left");
}
function EnableScrollbar()
{
// exit if page can't scroll
if ($(document).height() == $('body').height()) return;
// remove the placeholder, then bring back the scrollbar
$("#ScrollbarPlaceholder").fadeOut(function(){
$('body').css('overflow-y','auto');
});
}
Hope this helps.
希望这可以帮助。
回答by Rakesh Chaudhari
Use below code for disabling and enabling scroll bar.
使用以下代码禁用和启用滚动条。
Scroll = (
function(){
var x,y;
function hndlr(){
window.scrollTo(x,y);
//return;
}
return {
disable : function(x1,y1){
x = x1;
y = y1;
if(window.addEventListener){
window.addEventListener("scroll",hndlr);
}
else{
window.attachEvent("onscroll", hndlr);
}
},
enable: function(){
if(window.removeEventListener){
window.removeEventListener("scroll",hndlr);
}
else{
window.detachEvent("onscroll", hndlr);
}
}
}
})();
//for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();
回答by Dmitry Kulahin
If simple switching of body's 'overflow-y' is breaking your page's scroll position, try to use these 2 functions (jQuery):
如果简单地切换 body 的 'overflow-y' 会破坏页面的滚动位置，请尝试使用以下 2 个函数 (jQuery)：
// Run this function when you open your popup:
var disableBodyScroll = function(){
window.body_scroll_pos = $(window).scrollTop(); // write page scroll position in a global variable
$('body').css('overflow-y','hidden');
}
// Run this function when you close your popup:
var enableBodyScroll = function(){
$('body').css('overflow-y','scroll');
$(window).scrollTop(window.body_scroll_pos); // restore page scroll position from the global variable
}
回答by Mateusz ?witacz
This solution works for me.
这个解决方案对我有用。
HTML:
HTML：
<div id="payu-modal" class="modal-payu">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
CSS:
CSS：
.modal-payu {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
bottom: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
JS:
JS：
<script>
var btn = document.getElementById("button_1");
btn.onclick = function() {
modal.style.display = "block";
$('html').css('overflow', 'hidden');
}
var span = document.getElementsByClassName("close")[0];
var modal = document.getElementById('payu-modal');
window.onclick = function(event) {
if (event.target != modal) {
}else{
modal.style.display = "none";
$('html').css('overflow', 'scroll');
}
}
span.onclick = function() {
modal.style.display = "none";
$('html').css('overflow', 'scroll');
}
</script>
回答by Satish Dodia
https://jsfiddle.net/satishdodia/L9vfhdwq/1/
html:-Open popup
https://jsfiddle.net/satishdodia/L9vfhdwq/1/
html:-打开弹出窗口
Popup
弹出
pop open scroll stop now...when i will click on close automatically scroll running.
弹出打开滚动停止现在...当我将点击关闭自动滚动运行。
关闭**css:-**
#popup{
position: fixed;
background: rgba(0,0,0,.8);
display: none;
top: 20px;
left: 50px;
width: 300px;
height: 200px;
border: 1px solid #000;
border-radius: 5px;
padding: 5px;
color: #fff;
}
**jquery**:-
<script type="text/javascript">
$("#open_popup").click(function(){
$("#popup").css("display", "block");
$('body').css('overflow', 'hidden');
});
$("#close_popup").click(function(){
$("#popup").css("display", "none");
$('body').css('overflow', 'scroll');
});
</script>
回答by Jérémie
I had the same problem and found a way to get rid of it, you just have to stop the propagation on touchmove on your element that pops up. For me, it was fullscreen menu that appeared on the screen and you couldn't scroll, now you can.
我遇到了同样的问题并找到了摆脱它的方法，您只需要停止在弹出元素上的 touchmove 传播。对我来说，它是出现在屏幕上的全屏菜单，您无法滚动，现在可以了。
$(document).on("touchmove","#menu-left-toggle",function(e){
e.stopPropagation();
});
