0

我正在构建一个棒球模拟器，并且我有一个记录各种游戏更新的“游戏报告”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但这并没有导致我观察到任何变化。

4

1 回答 1

0

正如这里所承诺的，JsFiddle展示了如何实现这一点。这里的关键是使用

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

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

    padding-bottom: 200px;

强制额外的空白。

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

于 2013-11-01T20:02:02.980 回答