javascript Jquery 模态对话框禁用滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8935301/
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 modal dialogs DISABLE the scrollbars
提问by Nicolas Thery
As you can see on this link, http://jsbin.com/ozapol/9,
正如您在此链接上看到的， http://jsbin.com/ozapol/9，
Jquery disables the scrollbars on some versions of IE and the latest version of chrome. (I didnt try any other yet...)
Jquery 在某些版本的 IE 和最新版本的 chrome 上禁用滚动条。（我还没有尝试其他任何...）
Is there a way to keep scrollbars enabled to be able to scroll through a long long dialog ?
有没有办法让滚动条能够在长长的对话框中滚动？
Thank you ! Bye
谢谢 ！再见
Nice solution for Internet Explorer(Thanks to jk.)
Internet Explorer 的不错解决方案（感谢 jk。）
html {overflow-y : scroll}
Brutal workaround for Chrome(Thanks to jk.)
Chrome 的残酷解决方法（感谢 jk。）
On Chrome, JqueryUI HiHymans mouse events on the scrollbars. This looks like a bug that is referred in the links above. In order to remove those bindings, you have to unbind events each time you create a modal dialog :
在 Chrome 上，JqueryUI 会劫持滚动条上的鼠标事件。这看起来像是上面链接中提到的错误。为了删除这些绑定，您必须在每次创建模态对话框时取消绑定事件：
$("#longdialog").dialog({
open: function(event, ui) {
window.setTimeout(function() {
jQuery(document).unbind('mousedown.dialog-overlay')
.unbind('mouseup.dialog-overlay');
}, 100);
},
modal:true
});
There is the final example : http://jsbin.com/ujagov/2
最后一个例子：http: //jsbin.com/ujagov/2
Links to bug reports :
错误报告链接：
采纳答案by jk.
You can keep scrollbars enabled with:
您可以通过以下方式启用滚动条：
html {overflow-y: scroll;}
You could add that CSS programmatically so it doesn't affect every page of the site and possibly the design.
您可以以编程方式添加该 CSS，这样它就不会影响网站的每个页面，也可能不会影响设计。
And, you may have to unbind the mouse events that the modal dialog hiHymans:
并且，您可能必须解除模式对话框劫持的鼠标事件的绑定：
$("#longdialog").dialog({
open: function(event, ui) {
window.setTimeout(function() {
jQuery(document).unbind('mousedown.dialog-overlay')
.unbind('mouseup.dialog-overlay');
}, 100);
},
modal:true
});
See Scrollbar problem with jQuery UI dialog in Chrome and Safari
回答by Rostyslav Nikolayenko
This bug fixed at jQueryUi-1.10. Here is link with the issue http://bugs.jqueryui.com/ticket/4671.
此错误已在 jQueryUi-1.10 中修复。这是问题的链接http://bugs.jqueryui.com/ticket/4671。
回答by daniloquio
If you don't want to or can't upgrade to jQuery UI 1.10, this is the solution for you:
如果您不想或无法升级到 jQuery UI 1.10，这是适合您的解决方案：
回答by dimitril
Add following code to your css-file:
将以下代码添加到您的 css 文件中：
.ui-dialog .ui-dialog-content {
overflow-y: scroll;
}
#longdialog{
height: 450px;
}
The overflow doesn't work because the height was set to auto, define a specific height to the container div
溢出不起作用，因为高度设置为自动，定义容器 div 的特定高度
