在 jQuery UI 模式对话框打开时禁用浏览器滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4887332/
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 browser scrolling while jQuery UI modal dialog is open
提问by Omu
is it possible to disable scrolling in browser (just for browser's scrollbars) while a jQuery UI modal dialog is open.
是否可以在 jQuery UI 模式对话框打开时禁用浏览器中的滚动（仅适用于浏览器的滚动条）。
Note: I do want scrolling to be enabled inside the dialog
注意：我确实希望在对话框内启用滚动
采纳答案by JasCav
You can't disable scrolling completely, but you can stop scrolling with the mouse wheel and the buttons that typically perform scrolling.
您不能完全禁用滚动，但您可以使用鼠标滚轮和通常执行滚动的按钮停止滚动。
Take a look at this answerto understand how that is done. You could call these functions on the create eventand return everything to normal, on close.
回答by airtonix
$(formObject).dialog({
create: function(event, ui) {
$("body").css({ overflow: 'hidden' })
},
beforeClose: function(event, ui) {
$("body").css({ overflow: 'inherit' })
}
});
Or as I allude to in the comment below:
或者正如我在下面的评论中提到的那样：
var dialogActiveClassName="dialog-active";
var dialogContainerSelector="body";
$(formObject).dialog({
create: function(event, ui) {
$(dialogContainerSelector).addClass(dialogActiveClassName);
},
beforeClose: function(event, ui) {
$(dialogContainerSelector).removeClass(dialogActiveClassName);
}
});
But actually to be honest, you should ensure that creating a dialog bubbles an event up to your window object where you'd be watching for said events, roughly something like this pseudo:
但实际上，说实话，您应该确保创建一个对话框将一个事件冒泡到您要监视所述事件的窗口对象，大致类似于以下伪：
var dialogActiveClassName="dialog-active";
var dialogContainerSelector="body";
$(window).on("event:dialog-opened", function(){
$(dialogContainerSelector).addClass(dialogActiveClassName);
});
$(window).on("event:dialog-closed", function(){
$(dialogContainerSelector).removeClass(dialogActiveClassName);
});
回答by hallodom
I needed to do exactly the same thing, do it simply by adding a class to the body:
我需要做完全相同的事情，只需向主体添加一个类即可：
.stop-scrolling {
height: 100%;
overflow: hidden;
}
Add the class then remove when you want to re-enable scrolling, tested in IE, FF, Safari and Chrome.
添加该类，然后在您想要重新启用滚动时删除，在 IE、FF、Safari 和 Chrome 中进行了测试。
$('body').addClass('stop-scrolling')
回答by Naveen Kumar Alonekar
JS Bin reference for CSS overflow
Simply Add
只需添加
$('body').css('overflow','hidden');
$('body').css('overflow','hidden');
to your function that shows the modal.
到显示 modal 的函数。
And
和
$('body').css('overflow','scroll');
$('body').css('overflow','scroll');
to your function that closes the modal.
到您关闭模态的功能。
回答by Craig Nakamoto
Here is the best that I could come up with to solve this issue (I had the same problem) using the functions referenced in the answer by JasCav above (these functions):
这是我可以使用上面 JasCav 的答案中引用的函数（这些函数）来解决这个问题（我有同样的问题）的最佳方法：
dialogClass: 'dialog_fixed',
create: function(event, ui) {
disable_scroll(); // disable while dialog is visible
$('#dialog_form').hover(
function() { enable_scroll(); }, // mouse over dialog
function() { disable_scroll(); } // mouse not over dialog
);
},
beforeClose: function(event, ui) {
enable_scroll(); // re-enable when dialog is closed
},
the css is:
css是：
.dialog_fixed { position:fixed !important; }
and it just keeps the dialog fixed on the page, which maybe we don't need anymore.
它只是将对话框固定在页面上，也许我们不再需要了。
This allows mouse scrolling while the mouse is over the dialog, but not when it is outside the dialog. Unfortunately it will still scroll the main page when the mouse is over the dialog and you scroll past the end of the content inside the dialog (in IE right away, in Safari and Firefox after a short delay). I would love to know how to fix this.
这允许鼠标在对话框上滚动时滚动，但在对话框外时不允许滚动。不幸的是，当鼠标悬停在对话框上并且您滚动到对话框内内容的末尾时，它仍然会滚动主页（在 IE 中立即，在 Safari 和 Firefox 中稍作延迟）。我很想知道如何解决这个问题。
I tested this in Safari 5.1.5, Firefox 12, and IE 9.
我在 Safari 5.1.5、Firefox 12 和 IE 9 中对此进行了测试。
回答by oLinkWebDevelopment
Stops scrolling, adjusts dialog positionand returns user to part of page they were viewingafter they close the dialog
停止滚动、调整对话框位置并在用户关闭对话框后将用户返回到他们正在查看的页面的一部分
$('<div/>').dialog({
open : function(event, ui) {
$('html').attr('data-scrollTop', $(document).scrollTop()).css('overflow', 'hidden');
$(this).dialog('option','position',{ my: 'center', at: 'center', of: window });
},
close : function(event, ui) {
var scrollTop = $('html').css('overflow', 'auto').attr('data-scrollTop') || 0;
if( scrollTop ) $('html').scrollTop( scrollTop ).attr('data-scrollTop','');
}
});
回答by SilentJ
Just a modification on an answer posted above by hallodom
只是对 halodom 上面发布的答案的修改
$('body, html').addClass('stop-scrolling')
$('body, html').addClass('stop-scrolling')
browser scrolling wasn't disabled until I added html.
直到我添加了 html，浏览器滚动才被禁用。
.stop-scrolling {
overflow: hidden;
}
by removing height: 100%, the bump-to-top effect was removed.
通过去除 height: 100%，去除了凹凸效果。
Tested on Chrome, Firefox and Safari.
在 Chrome、Firefox 和 Safari 上测试。
回答by horizon1711
Searched for a long long time. Finally the follow link saves me. Hope it's helpful to others.
找了很久很久。最后，下面的链接救了我。希望对其他人有帮助。
It uses a container for the main body. The scrolling in dialog won't affect the background container.
它使用一个容器作为主体。在对话框中滚动不会影响背景容器。
http://coding.abel.nu/2013/02/prevent-page-behind-jquery-ui-dialog-from-scrolling/
http://coding.abel.nu/2013/02/prevent-page-behind-jquery-ui-dialog-from-scrolling/
回答by Kirk Ross
Create this css class:
创建这个 css 类：
.stop-scrolling {
overflow:hidden;
height: 100%;
left: 0;
-webkit-overflow-scrolling: touch;
position: fixed;
top: 0;
width: 100%;
}
Then add this to your dialog init:
然后将其添加到您的对话框初始化中：
$("#foo").dialog({
open: function () {
$('body').addClass('stop-scrolling');
},
close: function () {
$('body').removeClass('stop-scrolling');
},
// other options
});
If you are already using open: and close: to call other functions, just add the addClass and removeClass lines in the appropriate place.
如果您已经使用 open: 和 close: 来调用其他函数，只需在适当的位置添加 addClass 和 removeClass 行。
回答by hcharge
Old post but the way I did it was:
旧帖子，但我这样做的方式是：
open: function(event, ui) {
$('html').css('overflow', 'hidden');
$('.ui-widget-overlay').width($(".ui-widget-overlay").width() + 18);
},
close: function(event, ui) {
$('html').css('overflow', 'hidden');
}
This seems to work quite nicely
这似乎工作得很好
