Question

所以我有一个带溢出的容器：滚动。容器的高度可以改变，大多数情况下会降低。该更改将使用jQuery进行动画处理。但是当容器被设置动画时，滚动条会消失，只有在动画完成时才会重新出现。无论如何都要在容器的动画旁边更改滚动条的尺寸吗？

以下是jsfiddle的一个示例：http://jsfiddle.net/SPLt2/

Answer 1

问题是animate会自动将样式设置为overflow: hidden。

您可以通过使用步进函数覆盖样式来避免这种情况：

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

Answer 2

如果滚动条在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。

当容器高度改变时动画scollbars

2 个答案: