在jQuery UI模式对话框打开时禁用浏览器滚动

Question

是否可以在jQuery UI模式对话框打开时禁用浏览器中的滚动(仅适用于浏览器的滚动条).

注意:我确实希望在对话框中启用滚动

Answer 1

$(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);
});

Answer 2

我需要完成同样的事情,只需在主体中添加一个类即可:

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

添加该类,然后在要重新启用滚动时删除,在IE,FF,Safari和Chrome中进行测试.

$('body').addClass('stop-scrolling')

Answer 3

JS Bin参考CSS溢出

简单地添加

$('body').css('overflow','hidden');

到显示模态的函数.

和

$('body').css('overflow','scroll');

你的函数关闭模态.

Answer 4

这是我能用上面的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
},

css是:

.dialog_fixed { position:fixed !important; }

它只是将对话框固定在页面上,这可能我们不再需要了.

这允许鼠标在对话框上滚动时进行鼠标滚动,但在对话框外时不允许滚动.不幸的是,当鼠标悬停在对话框上时,它仍会滚动主页面,并滚动到对话框内的内容结尾(在IE中,在短暂的延迟后,在Safari和Firefox中).我很想知道如何解决这个问题.

我在Safari 5.1.5,Firefox 12和IE 9中对此进行了测试.

Answer 5

停止滚动,调整对话框位置,并在关闭对话框后将用户返回到他们正在查看的部分页面

$('<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','');
    }
});

Answer 6

您无法完全禁用滚动,但可以使用鼠标滚轮和通常执行滚动的按钮停止滚动.

看看这个答案,了解如何做到这一点.您可以在create事件上调用这些函数,并在关闭时将所有内容恢复正常.