是否可以在打开 jQuery UI 模式对话框时禁用浏览器中的滚动（仅适用于浏览器的滚动条）。
注意：我确实希望在对话框中启用滚动
【问题讨论】：
$(formObject).dialog({
create: function(event, ui) {
$("body").css({ overflow: 'hidden' })
},
beforeClose: function(event, ui) {
$("body").css({ overflow: 'inherit' })
}
});
或者正如我在下面的评论中提到的那样：
var dialogActiveClassName="dialog-active";
var dialogContainerSelector="body";
$(formObject).dialog({
create: function(event, ui) {
$(dialogContainerSelector).addClass(dialogActiveClassName);
},
beforeClose: function(event, ui) {
$(dialogContainerSelector).removeClass(dialogActiveClassName);
}
});
但老实说，您应该确保创建一个对话框将一个事件冒泡到您要监视所述事件的窗口对象，大致类似于这样的伪：
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);
});
【讨论】：
open 事件而不是create 事件上。例如，如果您有一个显示模态对话框的按钮，如果您已经创建了对话框，即使它没有显示，主体也将无法滚动。
我需要做同样的事情，只需在正文中添加一个类即可：
.stop-scrolling {
height: 100%;
overflow: hidden;
}
当你想重新启用滚动时，添加类然后删除，在 IE、FF、Safari 和 Chrome 中测试。
$('body').addClass('stop-scrolling')
【讨论】：
JS Bin reference for CSS overflow
只需添加
$('body').css('overflow','hidden');
显示模式的函数。
还有
$('body').css('overflow','scroll');
到你的关闭模式的函数。
【讨论】：
使用上面 JasCav (these functions) 的答案中引用的函数，这是我能想到的最好的方法来解决这个问题（我遇到了同样的问题）：
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
},
css 是：
.dialog_fixed { position:fixed !important; }
它只是将对话框固定在页面上，也许我们不再需要了。
这允许鼠标在对话框上方时鼠标滚动，但在对话框外时不允许。不幸的是，当鼠标悬停在对话框上并且您滚动到对话框内内容的末尾时，它仍然会滚动主页（在 IE 中立即，在 Safari 和 Firefox 中经过短暂的延迟）。我很想知道如何解决这个问题。
我在 Safari 5.1.5、Firefox 12 和 IE 9 中对此进行了测试。
【讨论】：
停止滚动，调整对话框位置并在用户关闭对话框后返回他们正在查看的部分页面
$('<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','');
}
});
【讨论】：
您不能完全禁用滚动，但可以使用鼠标滚轮和通常执行滚动的按钮来停止滚动。
查看this answer 以了解它是如何完成的。您可以在create event 上调用这些函数并在close 上恢复一切正常。
【讨论】：
$(document).('on', '.dialog', function(){ /*scroll code*/ });
只是对上面由 hallodom 发布的答案的修改
$('body, html').addClass('stop-scrolling')
在我添加 html 之前，浏览器滚动未被禁用。
.stop-scrolling {
overflow: hidden;
}
通过移除 height: 100%，移除了顶顶效果。
在 Chrome、Firefox 和 Safari 上测试。
【讨论】：
旧帖子，但我这样做的方式是：
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');
}
这似乎工作得很好
【讨论】：
找了好久。最后，下面的链接救了我。希望对其他人有所帮助。
它使用一个容器作为主体。对话框中的滚动不会影响背景容器。
http://coding.abel.nu/2013/02/prevent-page-behind-jquery-ui-dialog-from-scrolling/
【讨论】：
创建这个 css 类：
.stop-scrolling {
overflow:hidden;
height: 100%;
left: 0;
-webkit-overflow-scrolling: touch;
position: fixed;
top: 0;
width: 100%;
}
然后将其添加到您的对话框初始化中：
$("#foo").dialog({
open: function () {
$('body').addClass('stop-scrolling');
},
close: function () {
$('body').removeClass('stop-scrolling');
},
// other options
});
如果您已经在使用 open: 和 close: 来调用其他函数，只需在适当的位置添加 addClass 和 removeClass 行。
【讨论】：
$(settings.dialogContentselector).dialog({
autoOpen: false,
modal: true,
open: function( event, ui ) {
$("html").css({ overflow: 'hidden' });
$("body").css({ overflow: 'hidden' });
},
beforeClose: function( event, ui ) {
$("html").css({ overflow: 'auto' });
$("body").css({ overflow: 'auto' });
}
});
【讨论】：
试试这个。它被http://jqueryui.com 自己使用
html { overflow-y: scroll; }
【讨论】：
create: 事件使页面第一次加载时滚动条消失
我用open: 更改它，现在像魅力一样工作
【讨论】：
在弹出窗口关闭时避免正文跳到顶部的更好解决方案：
$(document).ready(function(){
var targetNodes = $(".cg-popup");
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var myObserver = new MutationObserver (mutationHandler);
var obsConfig = { attributes : true, attributeFilter : ['style'] };
// ADD A TARGET NODE TO THE OBESERVER. CAN ONLY ADD ONE NODE AT TIME
targetNodes.each ( function () {
myObserver.observe (this, obsConfig);
} );
function mutationHandler (mutationRecords) {
var activate_scroll = true;
$(".cg-popup").each(function( index ) {
if($(this).css("display") != "none"){
$('html, body').css({'overflow-y': 'hidden', 'height': '100%'});
activate_scroll = false;
return;
}
});
if(activate_scroll){
$('html, body').css({'overflow-y': 'auto', 'height': 'auto'});
}
}
});
【讨论】：
此问题已修复， 解决方案：只需打开您的 bootstap.css 并进行如下更改
body.modal-打开，
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
右边距：15px;
}
到
body.modal-打开，
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
/margin-right: 15px;/
}
请在 3 分钟内观看以下 youtube 视频，您的问题将得到解决... https://www.youtube.com/watch?v=kX7wPNMob_E
【讨论】：
这是因为您必须在代码中添加modal: true；这会阻止用户与背景交互。
【讨论】：