Chrome 和 Safari 中 jQuery UI 对话框的滚动条问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1617638/
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
Scrollbar problem with jQuery UI dialog in Chrome and Safari
提问by alexis.kennedy
I'm using the jQuery UI dialog with modal=true. In Chrome and Safari, this disables scrolling via the scroll bar and cursor keys (scrolling with the mouse wheel and page up/down still works).
我将 jQuery UI 对话框与modal=true. 在 Chrome 和 Safari 中，这会禁用通过滚动条和光标键滚动（使用鼠标滚轮和向上/向下翻页仍然有效）。
This is a problem if the dialog is too tall to fit on one page - users on a laptop get frustrated.
如果对话框太高而无法放在一页上，这就是一个问题 - 笔记本电脑上的用户会感到沮丧。
Someone raised this three months ago on the jQuery bug tracker - http://dev.jqueryui.com/ticket/4671- it doesn't look like fixing it is a priority. :)
三个月前有人在 jQuery 错误跟踪器上提出了这个问题 - http://dev.jqueryui.com/ticket/4671- 看起来修复它并不是一个优先事项。:)
So does anyone:
任何人也是如此：
- have a fix for this?
- have a suggested workaround that would give a decent usability experience?
- 有解决办法吗？
- 是否有建议的解决方法可以提供不错的可用性体验？
I'm experimenting with mouseover / scrollto on bits of the form, but it's not a great solution :(
我正在尝试在表单的某些部分上使用鼠标悬停/滚动，但这不是一个很好的解决方案:(
EDIT :props to Rowan Beentje (who's not on SO afaict) for finding a solution to this. jQuery UI prevents scrolling by capturing the mouseup / mousedown events. So the code below seems to fix it:
编辑：支持 Rowan Beingtje（他不在 SO afaict 上）寻找解决方案。jQuery UI 通过捕获 mouseup / mousedown 事件来防止滚动。所以下面的代码似乎修复了它：
$("dialogId").dialog({
open: function(event, ui) {
window.setTimeout(function() {
jQuery(document).unbind('mousedown.dialog-overlay')
.unbind('mouseup.dialog-overlay');
}, 100);
},
modal: true
});
Use at own risk, I don't know what other unmodal behaviour unbinding this stuff might allow.
使用风险自负，我不知道解除绑定这些东西可能允许的其他非模态行为。
采纳答案by Tim Banks
I agree with the previous posters in that if the dialog is not working for you, it may be good to rethink your design. However, I can offer a suggestion.
我同意之前的海报，如果对话框不适合您，重新考虑您的设计可能会很好。不过，我可以提供一个建议。
Could you put the dialog content inside a scrollable div? That way instead of the whole page needing to scroll, just the content inside the div would need to scroll. This workaround should be pretty easy to accomplish too.
你能把对话框内容放在一个可滚动的 div 中吗？这样就不需要滚动整个页面，只需要滚动 div 内的内容。这个解决方法也应该很容易实现。
回答by Ricardo Rodrigues
You can use this code : jquery.ui.dialog.patch.js
您可以使用此代码：jquery.ui.dialog.patch.js
It solved the problem for me. Hope this is the solution that you're looking for.
它为我解决了这个问题。希望这是您正在寻找的解决方案。
回答by Adrian Adkison
While I agree with, the folks in the party of not making a dialog that is bigger than the viewport, I think there are cases where scrolling may be necessary. A dialog might look very good in a resolution greater the 1024 x 768, but anything less looks crunched. Or say for instance you never want a dialog to show up over the header of your site. In my case I have ads that occassionally have flash z-index problems, so I never want dialogs to show above them. Finally, it is bad in general to take away any sort of common control, like scrolling, away from the user. This is a problem separate from how big the dialog is.
虽然我同意不制作比视口大的对话框的派对中的人，但我认为在某些情况下可能需要滚动。在分辨率大于 1024 x 768 的情况下，对话框可能看起来非常好，但如果分辨率低于此分辨率，则任何内容都显得很笨拙。或者说，例如，您永远不希望在您网站的标题上显示对话框。就我而言，我的广告偶尔会出现 flash z-index 问题，因此我从不希望在它们上方显示对话框。最后，从用户那里拿走任何类型的公共控件（如滚动）通常是不好的。这是一个与对话框有多大不同的问题。
I would be interested in knowing why the those mousedown and mouseup events are there in the first place.
我很想知道为什么这些 mousedown 和 mouseup 事件首先存在。
I tried the solution that alexis.kennedy provided and it works break without breaking anything that I can see in any browser.
我尝试了 alexis.kennedy 提供的解决方案，它可以正常工作而不会破坏我在任何浏览器中可以看到的任何内容。
回答by Anton Palyok
I workaround this situation by disabling dialog modal mode and showing overlay manually:
我通过禁用对话框模式并手动显示覆盖来解决这种情况：
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();
});
//...
}
回答by Seb
I believe having too big dialogs is against your 'decent usability experience' requirement. Even if you didn't have to have a workaround due to the jQuery UI Dialog bug, I'd get rid of such big dialogs. Anyway, I do understand there may be some 'extreme' cases in which you need to adapt, so...
我相信对话太大不符合您的“体面的可用性体验”要求。即使由于 jQuery UI 对话框错误您不必有解决方法，我也会摆脱如此大的对话框。无论如何，我确实理解可能存在一些您需要适应的“极端”情况，所以......
That said, it would certainly help if you attached some screenshot - you're asking a question about a design, but we can't see it. But I understand you might not be able/willing to show the contents of it so that's fine. These are my blindguesses; hope you find them useful:
也就是说，如果您附上一些屏幕截图肯定会有所帮助 - 您正在询问有关设计的问题，但我们看不到它。但我知道您可能无法/不愿意显示它的内容，所以没关系。这些是我的盲目猜测；希望你觉得它们有用：
- Try a different layoutfor your dialog. If you do this, do it for all dialogs, not just the ones you're having problem with (users don't like to learn many different UIs).
- If you can't find a different layout, try widening your dialogfirst. IF you have many options to choose from, you might find a good solution by dividing them in two columns.
- Knowing you're already using jQuery UI, try using tabs. If you have too many options, a tabbed panel is usually a good solution - users are 'used' to that widget.
- You talked about 'items' in the dialog, but we don't know what an item is. Is it possible at all to show them in a 'summarized' way such as a small list at the left and an expanded view at the right when you click on them? For example, having a list with the items titles at the left, and when you click them you get the full display on the right.
- 为您的对话框尝试不同的布局。如果您这样做，请对所有对话框执行此操作，而不仅仅是您遇到问题的对话框（用户不喜欢学习许多不同的 UI）。
- 如果找不到其他布局，请先尝试扩大对话框。如果您有很多选项可供选择，您可能会通过将它们分成两列来找到一个很好的解决方案。
- 知道您已经在使用 jQuery UI，请尝试使用tabs。如果您有太多选项，选项卡式面板通常是一个很好的解决方案——用户已经“习惯”了那个小部件。
- 您在对话框中谈到了“项目”，但我们不知道项目是什么。当您单击它们时，是否有可能以“汇总”方式显示它们，例如左侧的小列表和右侧的展开视图？例如，在左侧有一个带有项目标题的列表，当您单击它们时，您会在右侧获得完整的显示。
Without being able to see the design, I guess that's as far as I can go.
在无法看到设计的情况下，我想这是我所能做到的。
回答by linuxeasy
There is a workaround that unbind the binded event. This adds the following in the open: event of the dialog :
有一种解决方法可以解除绑定的事件。这会在对话框的 open: 事件中添加以下内容：
$("#longdialog").dialog({
modal:true,
open: function (event, ui) { window.setTimeout(function () {
jQuery(document).unbind('mousedown.dialog-overlay').unbind('mouseup.dialog-overlay'); }, 100);
}
});
This works ... but this is ugly
这有效......但这很丑陋
--from https://github.com/jquery/jquery-ui/pull/230#issuecomment-3630449
--来自https://github.com/jquery/jquery-ui/pull/230#issuecomment-3630449
Worked like a charm in my case.
在我的情况下，它就像一个魅力。
回答by Jared Hales
This is a bug that has been since fixed: http://bugs.jqueryui.com/ticket/4671
这是一个已经修复的错误：http: //bugs.jqueryui.com/ticket/4671
回答by anand vishwakarma
Use the code below. It will work fine.
使用下面的代码。它会正常工作。
$("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))
});
回答by Tracker1
Did you try my extension to the Dialog? http://plugins.jquery.com/project/jquery-framedialog
你试过我对对话框的扩展吗？ http://plugins.jquery.com/project/jquery-framedialog
