Chrome 和 Safari 中 jQuery UI 对话框的滚动条问题 [英] Scrollbar problem with jQuery UI dialog in Chrome and Safari

问题描述

我正在使用带有 modal=true 的 jQuery UI 对话框.在 Chrome 和 Safari 中，这会禁用通过滚动条和光标键滚动(使用鼠标滚轮滚动，向上/向下翻页仍然有效).

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).

如果对话框太高而无法放在一页上，则会出现问题 - 使用笔记本电脑的用户会感到沮丧.

This is a problem if the dialog is too tall to fit on one page - users on a laptop get frustrated.

三个月前有人在 jQuery 错误跟踪器上提出了这个问题 - http://dev.jqueryui.com/ticket/4671 - 看起来修复它不是一个优先事项.:)

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. :)

任何人也是:

1. 有解决办法吗?
2. 是否有建议的解决方法，可以提供不错的可用性体验?

我正在尝试使用鼠标悬停/滚动到表单的位，但这不是一个很好的解决方案:(

I'm experimenting with mouseover / scrollto on bits of the form, but it's not a great solution :(

支持 Rowan Beingtje(他不在 SO afaict 上)寻找解决方案.jQuery UI 通过捕获 mouseup/mousedown 事件来防止滚动.所以下面的代码似乎修复了它:

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:

$("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.

推荐答案

我同意之前的海报，如果对话框不适合您，重新考虑您的设计可能会很好.不过，我可以提供一个建议.

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.

你能把对话框内容放在一个可滚动的 div 中吗?这样，不需要滚动整个页面，只需要滚动 div 内的内容.这种解决方法也应该很容易实现.

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.

这篇关于Chrome 和 Safari 中 jQuery UI 对话框的滚动条问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！