我使用的是与jQuery UI的对话框modal=true 。 在Chrome和Safari，这禁用通过滚动条和光标键进行滚动（使用鼠标滚轮和向上/向下翻页仍然有效滚动）。
这是一个问题，如果对话框太高，以适应在一个页面上 - 在笔记本电脑上的用户感到沮丧。
有人提出这个三个月前了jQuery bug跟踪系统- http://dev.jqueryui.com/ticket/4671 -它看起来并不像修正它是当务之急。 :)
因此，没有人：
- 对此有一个解决？
- 有一个建议的解决方法，这将使一个体面的可用性体验？
我与鼠标悬停/ scrollto对形式的实验位，但它不是一个很好的解决方案:(
编辑：道具罗文Beentje（谁不是在SO AFAICT）寻找一个解决这个。 jQuery UI的防止通过捕获鼠标松开/鼠标按下事件滚动。 所以，下面的代码似乎解决它：
$("dialogId").dialog({
open: function(event, ui) {
window.setTimeout(function() {
jQuery(document).unbind('mousedown.dialog-overlay')
.unbind('mouseup.dialog-overlay');
}, 100);
},
modal: true
});
使用在自己的风险，我不知道还有什么其他行为非模态解除绑定这个东西可能会允许。
Answer 1:
我同意，如果对话框没有为你工作，它有良好的可重新考虑你的设计前面的海报。 不过，我可以给您一个建议。
你可以把一个滚动的DIV中的对话内容？ 通过这种方式，而不是整个页面需要滚动，只需在div里面的内容需要滚动。 此解决办法应该是很容易实现了。
Answer 2:
您可以使用此代码： jquery.ui.dialog.patch.js
它解决了这个问题对我来说。 希望这是你要寻找的解决方案。
Answer 3:
虽然我同意，在没有提出一个对话框，比视口大党的人，我觉得有哪里滚动可能是必要的情况下。 一个对话框，看起来很不错的分辨率更高的1024×768，但任何看起来少嘎吱作响。 或者说，例如，你永远不希望一个对话框，超过你的网站的标题显示出来。 在我来说，我有偶尔有闪光的z-index问题的广告，所以我从来没有想对话框显示在他们之上。 最后，这是一般的差带走任何形式的共同控制的，就像滚动，远离用户。 这是从该对话框有多大是分开的问题。
为什么这些鼠标按下和MouseUp事件摆在首位在那里我会有兴趣知道。
我想alexis.kennedy提供的解决方案，它的工作原理破不破坏任何东西，我可以在任何浏览器中看到。
Answer 4:
我解决方法通过禁用对话框模态模式和手动显示覆盖这种情况：
function showPopup()
{
//...
// actionContainer - is a DIV for dialog
if ($.browser.safari == true)
{
// disable modal mode
$("#actionContainer").dialog('option', 'modal', false);
// show overlay div manually
var tempDiv = $("<div id='tempOverlayDiv'></div>");
tempDiv.css("background-color", "#000");
tempDiv.css("opacity", "0.2");
tempDiv.css("position", "absolute");
tempDiv.css("left", 0);
tempDiv.css("top", 0);
tempDiv.css("width", $(document).width());
tempDiv.css("height", $(document).height());
$("body").append(tempDiv);
}
// remove overlay div on dialog close
$("#actionContainer").bind('dialogclose', function(event, ui) {
$("#tempOverlayDiv").remove();
});
//...
}
Answer 5:
我相信有太大的对话是对你的“体面的易用性体验的需求。 即使你没有有因jQuery用户界面对话框的bug解决办法，我会摆脱这样的大对话框。 反正我知道有可能是在您需要调整一些“极端”的情况下，所以...
这就是说，它肯定会帮助，如果你附加了一些截图 - 你问一个关于设计的问题，但我们不能看到它。 但我知道你可能无法/乐于展示它的内容，这样的罚款。 这些都是我的猜测失明 ; 希望你发现它们非常有用：
- 试试你的对话框不同的布局 。 如果你这样做，这样做对所有对话框，而不仅仅是您遇到问题的人（用户不喜欢学习很多不同的UI）。
- 如果你不能找到一个不同的布局，尽量第一张紧你的对话框 。 如果你有很多选项可供选择，你可以通过把他们两列找到一个很好的解决方案。
- 知道你已经在使用jQuery UI，请尝试使用标签 。 如果你有太多的选择，一个标签面板通常是一个很好的解决方案 - 用户“拿来主义”到该部件。
- 你谈到有关该对话框中“项目”，但我们不知道一个项目是什么。 是否有可能在所有向他们展示一个“总结”的方式，例如在左侧小的单子，并在当你点击他们正确的扩展视图？ 例如，具有与左侧的项目标题的列表，当你点击他们你右边的全屏显示。
如果不能够看到的设计，我想这是因为据我可以走了。
Answer 6:
还有就是取消绑定绑定事件的解决方法。 这增加了在开放以下内容：对话框的事件：
$("#longdialog").dialog({
modal:true,
open: function (event, ui) { window.setTimeout(function () {
jQuery(document).unbind('mousedown.dialog-overlay').unbind('mouseup.dialog-overlay'); }, 100);
}
});
这工作......但是这是丑陋的
--from https://github.com/jquery/jquery-ui/pull/230#issuecomment-3630449
工作就像在我的案件魅力。
Answer 7:
这是已被因为修正了一个错误： http://bugs.jqueryui.com/ticket/4671
Answer 8:
你试试我的扩展，对话框？ http://plugins.jquery.com/project/jquery-framedialog
Answer 9:
使用下面的代码。 它将很好地工作。
$("dialogId").dialog({
open: function(event, ui) {
window.setTimeout(function() {
jQuery(document).unbind('mousedown.dialog-overlay')
.unbind('mouseup.dialog-overlay');
}, 100);
},
modal: true,
safariBrowser: (function( $, undefined ) {
if ($.ui && $.ui.dialog) {
$.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function(event) { return event + '.dialog-overlay'; }).join(' ');
}
}(jQuery))
});
文章来源: Scrollbar problem with jQuery UI dialog in Chrome and Safari
