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

问题描述

我正在使用 modal = true 的jQuery UI对话框。在Chrome和Safari中，这将禁用通过滚动条和光标键滚动（滚动鼠标滚轮和页面向上/向下滚动仍然有效）。

这是一个问题，如果该对话框太高而无法放在一页上 - 笔记本电脑上的用户会感到沮丧。

有人在三个月前提出了jQuery bug跟踪器 - http://dev.jqueryui.com/ticket/4671 - 它看起来不像是修复它是一个优先事项。 ：）

所以没有人：

1. 有解决方法吗？


2. 有建议的解决方法，可以提供良好的可用性体验吗？

我正在试验鼠标悬停/滚动到表单上的位，但它不是一个很好的解决方案：（b / b）
$ b 编辑：道具到Rowan Beentje（谁不在SO 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 
 }）; 
  

使用自己的风险，我不知道还有什么其他的unmodal行为解绑这个东西mig ht allow。

解决方案

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

你可以把对话内容放在一个可滚动的div里面吗？这样，而不是整个页面需要滚动，只需要div内的内容滚动。这种解决方法应该很容易实现。

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.

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

So does anyone:

1. have a fix for this?
2. 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:

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

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屋！