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>

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

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

这是jsfiddle 上的演示。

如何激活侧面滑块？

谢谢！

Answer 1

一个干净的解决方案如下：

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

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

Answer 2

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

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

这是有效的：

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

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

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