在动画上强制垂直滚动条

Question

我有一个从 height: 0 到 height: 80% （主体的 80%）进行动画处理的 div，有时这个出现的 div 中的内容会比 div 更大，需要一个滚动条。

问题是滚动条在动画运行时不明显，并且仅在动画结束后需要时才出现。 （确实是一件好事）

但我很挑剔，因为我正在向我的网站添加最后的修饰，当滚动条随机出现时，它会将内容向左移动，看起来很有趣。

所以我希望滚动条无论如何都一直在那里。这可能吗？

Answer 1

您的动画库必须在外部元素上设置 overflow: hide，这就是滚动条消失的原因。

尝试将内容包装在另一个 div 中：

<!-- the outer element; pass this one to the animation lib -->
<div>
    <!-- the scroll bar will appear on this element -->
    <div style="overflow: scroll; height: 100%">
        <!-- content here -->
    </div>
</div>

在此处尝试：http://jsfiddle.net/e3BkK/

Answer 2

要始终显示垂直滚动条，您可以使用

#yourDivId {
  overflow-y: scroll;
}

如果您包含的内容的高度小于#yourDivId，则垂直滚动条将显示为禁用。

如果它的高度较大，则垂直滚动条将启用。

Answer 3

通过 CSS 将 overflow:scroll 添加到 body 元素：http ://jsfiddle.net/GMcdf/1/。

body {
    overflow: scroll;
}