Animating scollbars when container height is changed

So I have a container with overflow-y: scroll. The container's height can change, most often it will be reduced. The change will be animated using jQuery. But when container is animated, the scrollbar disappea开发者_开发百科rs and it only reappears when the animation is complete. Is there anyway to change the dimensions of the scrollbar alongside the container's animation?

Here's an example on jsfiddle: http://jsfiddle.net/SPLt2/

The problem is that animate automatically sets the style to overflow: hidden.

You can circumvent this by overriding the style with a step function:

$('button').click(function() {
    $('#container').animate(
        {'height': '100px'}, 
        { step: function() { $(this).css("overflow-y", "scroll") } }
    );
});

And if the scrollbar doesn't stay around after a step (like I experienced) add a complete function to it.

Like this :

$('button').click(function() {
    $('#container').animate(
        {'height': '100px'}, 
        { step: function() { $(this).css("overflow-y", "scroll") } },
        { complete: function() { $(this).css("overflow-y", "scroll") } }
    );
});

Have a look at http://bugs.jquery.com/ticket/2648 for more informations.