jQuery simplemodal 禁用滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5485244/
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
jQuery simplemodal disable scrolling
提问by smds45
I have more than 2000 pixels scrolling content on a page.
我在一个页面上有超过 2000 像素的滚动内容。
If the user clicks a diva scrolling content pops up in a simplemodal window. Now my client wants to make the original page non-scrollable while the modal window is up. (Of course the modal should be still scrollable.)
如果用户单击一个div滚动内容，则会在一个简单的模态窗口中弹出。现在我的客户想要在模态窗口打开时使原始页面不可滚动。（当然，模态应该仍然是可滚动的。）
Is it even possible?
甚至有可能吗？
Edit: I have tried your suggestions. Basically it works, but the problem is a little bit complicated:
编辑：我已经尝试过你的建议。基本上它是有效的，但问题有点复杂：
$(".foReadMoreLink a").click(function(){
if ($('#modalBox').length == 0)
$('body').append('<div style="display:none" id="modalBox"></div>')
$('body').css({'overflow':'hidden'});
$.post('jquery/loadarticle.php',{id:$(this).attr('id')},function(data){
$('#modalBox').html(data).modal({overlayClose:'true'});
})
return false;
});
I use return false on the links so bots and users without JavaScript (yes, that's 2%) can open the articles. With the code above it works as expected, but after closing the modal I have to have back the scrollbar but this code won't work:
我在链接上使用 return false 以便没有 JavaScript 的机器人和用户（是的，那是 2%）可以打开文章。使用上面的代码，它可以按预期工作，但是在关闭模式后，我必须返回滚动条，但此代码不起作用：
$(".foReadMoreLink a").click(function(){
if ($('#modalBox').length == 0)
$('body').append('<div style="display:none" id="modalBox"></div>')
$('body').css({'overflow':'hidden'});
$.post('jquery/loadarticle.php',{id:$(this).attr('id')},function(data){
$('#modalBox').html(data).modal({onClose:function(){$('body').css({'overflow':'auto'})},overlayClose:'true'});
})
return false;
});
回答by Alex
In your script to open your modal:
在你的脚本中打开你的模态：
$("html,body").css("overflow","hidden");
And on close:
关闭时：
$("html,body").css("overflow","auto");
(HTML and body are required as the scroll bars are attached to different parts of the browser depending on which you are using)
（需要 HTML 和正文，因为滚动条附加到浏览器的不同部分，具体取决于您使用的部分）
回答by mhenry1384
Turning the scrollbars on and off will cause the content to shift and the overlay will no longer cover the whole window. Here's how to fix it.
打开和关闭滚动条会导致内容移动，覆盖将不再覆盖整个窗口。这是修复它的方法。
var oldBodyMarginRight = $("body").css("margin-right");
$.modal(iframe, {
onShow: function () {
// Turn off scroll bars to prevent the scroll wheel from affecting the main page. Make sure turning off the scrollbars doesn't shift the position of the content.
// This solution works Chrome 12, Firefox 4, IE 7/8/9, and Safari 5.
// It turns off the scroll bars, but doesn't prevent the scrolling, in Opera 11 and Safari 5.
var body = $("body");
var html = $("html");
var oldBodyOuterWidth = body.outerWidth(true);
var oldScrollTop = html.scrollTop();
var newBodyOuterWidth;
$("html").css("overflow-y", "hidden");
newBodyOuterWidth = $("body").outerWidth(true);
body.css("margin-right", (newBodyOuterWidth - oldBodyOuterWidth + parseInt(oldBodyMarginRight)) + "px");
html.scrollTop(oldScrollTop); // necessary for Firefox
$("#simplemodal-overlay").css("width", newBodyOuterWidth + "px")
},
onClose: function () {
var html = $("html");
var oldScrollTop = html.scrollTop(); // necessary for Firefox.
html.css("overflow-y", "").scrollTop(oldScrollTop);
$("body").css("margin-right", oldBodyMarginRight);
$.modal.close();
}
});
回答by Upvote
Use
用
overflow:hidden
Apply it to the page when modal dialog is opened and remove it when the dialog is destroyed. This will hide your scrollbar.
打开模态对话框时将其应用于页面，并在对话框销毁时将其删除。这将隐藏您的滚动条。
回答by Flion
I found overflow:hiddennot so nice since it hides the content behind the semi-transparant overlay if the page is scrolled halfway.
我发现overflow:hidden不太好，因为如果页面滚动到一半，它会将内容隐藏在半透明叠加层后面。
I came up with the following, rather elaborate solution. It disables scrolling in all possible detectable ways I found. And puts the scrollposition straight back to the old position if the page was still scrolled somehow.
我想出了以下相当复杂的解决方案。它以我发现的所有可能的可检测方式禁用滚动。如果页面仍然以某种方式滚动，则将滚动位置直接放回旧位置。
var popupOpened = false;
function openPopup()
{
popupOpened = true;
//catch middle mouse click scrolling
$(document).bind('mousedown',disableMiddleMouseButtonScrolling);
//catch other kinds of scrolling
$(document).bind('mousewheel DOMMouseScroll wheel',disableNormalScroll);
//catch any other kind of scroll (though the event wont be canceled, the scrolling will be undone)
//IE8 needs this to be 'window'!
$(window).bind('scroll',disableNormalScroll);
$("#layover").css({"opacity" : "0.7"}).fadeIn();
$("#popup").fadeIn(300,function()
{
//use document here for crossbrowser scrolltop!
oldScrollTop = $(document).scrollTop();
});
}
function closePopup()
{
popupOpened = false;
$("#layover").fadeOut();
$("#popup").fadeOut(300,function(){
$(document).unbind('mousedown',disableMiddleMouseButtonScrolling);
$(document).unbind('mousewheel DOMMouseScroll wheel',disableNormalScroll);
$(window).unbind('scroll',disableNormalScroll);
});
}
function disableMiddleMouseButtonScrolling(e)
{
if(e.which == 2)
{
e.preventDefault();
}
return false;
}
function disableNormalScroll(e)
{
e.preventDefault();
$('html, body').scrollTop(oldScrollTop);
return false;
}
回答by Artur Beljajev
This option works like a charm:
这个选项就像一个魅力：
document.documentElement.style.overflow = 'hidden';
回答by user2642330
In my case in tag <a>param href = "#".
So solution be:
就我而言，在标签<a>param 中href = "#"。所以解决方案是：
href="javascript:void(0);"
