Question

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

Answer 1

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") } }
    );
});