在 IE6 和 IE7 中滚动 div 时，jQuery UI 按钮不会移动(有时会消失)

Question

我有一个可以滚动的 div(主页没有滚动条)和一个可滚动内容中的 jQuery UI 按钮。在 IE6 和 IE7 中，该按钮不会随 div 的内容一起滚动，并且如果您在其位置不正确时将鼠标放在其上，则会发生有趣的事情。

这是一个示例( header 中包含 jQuery 1.5):

<link rel="stylesheet" type="text/css" href="Lib/jquery-ui-1.8.10.custom.min.css" />
<script type="text/javascript" src="Lib/jquery-1.5.min.js"></script>
<script type="text/javascript" src="Lib/jquery-ui-1.8.10.custom.min.js"></script>

<div style="width: 400px; height: 300px; overflow: scroll;">
    <div style="width: 400px; height: 1200px;">
        Hello world<br /><br />
        <a href='#' id='test'>test button</a>
    </div>
</div>
<script>
    $('#test').button();
</script>

我找到了一个解决方法，但它并不完美；我捕获滚动事件并在按钮元素上调用 .button('enable') (由于某种原因 .button('refresh') 没有执行任何操作)。它使按钮正确滚动，但现在按钮在滚动时显示在 div 外部(它向上滚动超过 div 顶部并且仍然可见)。代码如下:

<link rel="stylesheet" type="text/css" href="Lib/jquery-ui-1.8.10.custom.min.css" />
<script type="text/javascript" src="Lib/jquery-1.5.min.js"></script>
<script type="text/javascript" src="Lib/jquery-ui-1.8.10.custom.min.js"></script>

<div class='scrollingDiv' style="width: 400px; height: 300px; overflow: scroll;">
    <div style="width: 400px; height: 1200px;">
        Hello world<br /><br />
        <a href='#' id='test' class='scrollingButton'>test button</a>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $('#test').button();

        $('.scrollingDiv').scroll(function() {
            $('.scrollingButton').button('enable');
        });
    });
</script>

Answer 1

这看起来与 jQuery http://bugs.jqueryui.com/ticket/5281 中的错误有关。

解决方法是将 position:relative; 设置为滚动容器。

正如 fracmak 在 jQuery 票证中评论的那样:IE7 存在溢出 div 的问题(滚动和隐藏)。这不是 ui-button 控件可以真正控制/检测的东西。