jQuery Div在每次追加后向下滚动

Question

我有div用作聊天，并根据用户操作添加消息。我希望如此，在添加每条消息后，div将向下滚动。但是，它不能100％工作。

以下是检查的小提琴：https://jsfiddle.net/mfj1ub8c/

我很确定它与每个附加物上的延迟/淡化/隐藏方法有关，但它们需要在那里产生一定的效果。

关于如何解决这个问题的任何想法？

Answer 1

仅在fadeIn完成时致电scrollDown。您可以使用fadeIn的完整回调参数。

e.g。

.fadeIn(500, scrollDown))

修正小提琴：https://jsfiddle.net/mfj1ub8c/1/

Answer 2

问题是在scrollDown实际显示元素（显示：块）之前调用fadeIn，因此滚动高度尚未更改。如果在scrollDown完成后致电fadeIn，则当新内容在屏幕外时，您将错过动画。您要做的是在显示元素时滚动，但仍然是透明的（不透明度：0）。如果您使用的是jQuery 1.8+，则可以使用the start option。

这是一个工作小提琴https://jsfiddle.net/mfj1ub8c/2/

此外，你的过度滚动，这不会引起你的问题，但它应该是整个高度减去可见高度。

  

$（'＃chat'）。prop（“scrollHeight”） - $（'＃chat'）。height（）