当添加内容时，div中的内容设置为溢出

Question

我正在建立一个棒球模拟器，我有一个“游戏报告”div记录各种游戏更新（在此图像的底部框中显示）：

截至目前，我有一些JS允许div在添加新内容时滚动，但新内容位于底部。

我希望将其垂直居中，因为它的生成，在其下方的空白区域准备好新内容。在生成内容时，它会动画内容，保持空白或多或少不变。

我正在使用它来自动滚动它（coffeescript）：

@reporter = $("#gameplay-game-report")
@height = $("#gameplay-game-report").height()
@reporter.animate({scrollTop: @height}, "slow")
@height += @reporter.height()
console.log("IN GAMEPLAY::addGameReport -> @height = #{@height}")

我尝试过添加和减去@height中的值，但这并没有导致我观察到任何变化。

Answer 1

正如这里所承诺的那样JsFiddle显示了如何实现这一目标。 这里的关键是使用

var height = $('#scrollable')[0].scrollHeight;

要获得正在滚动的div的高度。 其次是

    padding-bottom: 200px;

强制增加空白区域。

关于填充的侧注我发现如果我将div的高度设置为400并且填充为200它实际上会强制div为600.因此将div的高度设置为所需空间的一半并设置填充 - 底部相同。