Geek asks and answers

Animating scollbars when changing container height

So, I have a container with overflow-y: scroll. The height of the container may vary, most often it decreases. The change will be animated using jQuery. But when the container animates, the scrollbar disappears, and it appears only after the animation is complete. Is there a way to resize the scrollbar next to the container animation?

Here is a jsfiddle example: http://jsfiddle.net/SPLt2/

+3
source share
2 answers

The problem is that it animateautomatically sets the style to overflow: hidden.

You can get around this by overriding the style with the step function:

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

step ( ), complete.

:

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

http://bugs.jquery.com/ticket/2648 .

0

More articles:


All Articles