Jquery模式对话框禁用滚动条

Question

正如您在此链接上看到的， http://jsbin.com/ozapol/9,

Jquery 在某些版本的 IE 和最新版本的 chrome 上禁用滚动条。 （我还没有尝试任何其他的......）

有没有办法让滚动条保持启用，以便能够滚动长长的对话框？

谢谢！ 再见

Internet Explorer 的不错解决方案（感谢 jk。）

html {overflow-y : scroll}

Chrome 的残酷解决方法（感谢 jk。）

在 Chrome 上，JqueryUI 劫持滚动条上的鼠标事件。 这看起来像上面链接中提到的错误。 为了删除这些绑定，您必须取消绑定事件 每次创建模态对话框时：

$("#longdialog").dialog({
     open: function(event, ui) {
        window.setTimeout(function() {
            jQuery(document).unbind('mousedown.dialog-overlay')
                            .unbind('mouseup.dialog-overlay');
        }, 100);
    },
   modal:true
});

还有最后一个例子：http://jsbin.com/ujagov/2

错误报告链接：

1. http://bugs.jqueryui.com/ticket/4671
2. http://wiki.jqueryui.com/w/page/34725121/Visual-Test-Page-Cleanup

Answer 1

如果您不想或无法升级到 jQuery UI 1.10，这是适合您的解决方案：

https://stackoverflow.com/a/7740756/354756

Answer 2

此错误已在 jQueryUi-1.10 中修复。 这是http://bugs.jqueryui.com/ticket/4671问题的链接。

Answer 3

您可以通过以下方式启用滚动条：

html {overflow-y: scroll;}

您可以以编程方式添加该 CSS，这样它就不会影响网站的每个页面，也不会影响设计。

而且，您可能必须取消绑定模态对话框劫持的鼠标事件：

$("#longdialog").dialog({
     open: function(event, ui) {
        window.setTimeout(function() {
            jQuery(document).unbind('mousedown.dialog-overlay')
                            .unbind('mouseup.dialog-overlay');
        }, 100);
    },
   modal:true
});

见Scrollbar problem with jQuery UI dialog in Chrome and Safari

Answer 4

将以下代码添加到您的 css 文件中：

 .ui-dialog .ui-dialog-content {
    overflow-y: scroll;

 }
 #longdialog{
    height: 450px;

 }

溢出不起作用，因为高度设置为自动，为容器div定义一个特定的高度