javascript - 添加内容时，将 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

这里 promise 的是 JsFiddle显示这是如何实现的。 这里的关键是使用

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

要获取您正在滚动的 div 的高度。 紧随其后

    padding-bottom: 200px;

强制使用额外的空白。

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