jQuery UI Button doesn't move when scrolling a div in IE6 and IE7 (and disappears sometimes)

Question

I have a div that scrolls (the main page does not have scrollbars) and a jQuery UI Button in the content that's scrollable. In IE6 and IE7, the button does not scroll with the div's content and it does funny things if you put the mouse over it when it's not in the correct position.

Here's an example (jQuery 1.5 is included in the header):

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

I found a workaround, but it's not perfect; I catch the scroll event and call .button('enable') on the button element (for some reason .button('refresh') didn't do anything). It makes the button scroll correctly, but now the button shows outside of the div when scrolling (it scrolls up past the top of the div and is still visible). Here's the code:

<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

This looks to be related to a bug in jQuery http://bugs.jqueryui.com/ticket/5281

The workaround is to set position:relative; to the scrolling container.

As commented by fracmak in that jQuery ticket: IE7 has issues with overflowing divs (both scroll and hidden). This isn't something that the ui-button control can really control/detect.

Answer 2

为手风琴，标签，输入[type = submit]等添加了解决方法＃2： http ： //bugs.jqueryui.com/ticket/5281#comment：10

Answer 3

I think you have to add, at the beginning of the script tag, the following sentence:

    $(function(){

your code here

});

this means that the script will load when the dom (the page) is ready.

you can also add on the tag the attribute type="text/javascript"

I think that will work!