jQuery UI 对话框：如果对话框高度大于窗口高度，则垂直滚动不正确

Question

代码如下：

<script type="text/javascript">
    $(function(){
        var dialogOptions = {
            title: "Header",
            autoOpen: false,
            modal: true,
            width: 400,
            height: 1000
        };
        $(".wnd").dialog(dialogOptions);
        $("#btn").click(function(){ $(".wnd").dialog("open"); });
    });
</script>

<style>
    .wnd {background:yellow;height:900px;width:300px;}
</style>

<div class="wnd"></div>
<button id="btn">click me</button>

当对话框打开并高于主窗口时，有一个侧滑块，如果您尝试在鼠标光标的帮助下拖动它，它不会向下滑动（看起来像被锁定）。

但是当按下键盘上的按钮（箭头）或使用鼠标滚轮向下滚动时，它会很好地滑动。

这里是demo on jsfiddle。

如何激活那个侧滑条？

谢谢！

Answer 1

一个干净的解决方案是这样的：

http://jsfiddle.net/4fc33/6/

我正在做的是包装 jQuery UI 覆盖创建方法以关闭阻止滚动正常工作的事件。

Answer 2

无法使用窗口滑块的另一种方法是在对话窗口本身上启用滑块。如果您在对话框的最大高度上设置上限，这些将自动显示，但对于某些版本的 jQueryUI 可能会有点棘手。

至少在我使用的 jQueryUI 版本（1.9）上，我需要自己指定最大高度，因为根据the documentation 应该能够使用的 maxHeight 属性不起作用*。

以下是有效的：

$("#dialog").dialog({
    modal: true,
    width: "auto",
    height: "auto"
    /* maxHeight: whatever won't work, */
}).css("maxHeight", window.innerHeight-120);

我从窗口的高度减去 120 个像素，以适应对话框窗口的页眉和页脚部分及其“确定”按钮。

* 如果尝试调整对话框的大小，最大高度实际上会生效——但不会在显示时生效。