使溢出的内容滚动到元素上方（而不是下方）

Question

我正在尝试在我的网站上创建聊天页面。此应用程序的一个重要功能是，只要收到新消息，就应该在聊天输出区域上推送旧消息。

用户应该能够向上滚动以按照收到的时间顺序查看消息。我试过这样做（http://jsfiddle.net/wasingej/rqee378d/）。但是，我无法向上滚动以查看溢出的内容。

当内容溢出到我的元素（http://jsfiddle.net/wasingej/rqee378d/3/）下方时，这可以正常工作。

两者之间的所有变化都是bottom属性已更改为top。为什么我的滚动条不会出现在第一个示例中？

Answer 1

这不是更简单吗？

http://jsfiddle.net/rqee378d/4/

div.outer
{
    position: relative;
    min-height: 20px;
    overflow-y: scroll;
}

div
{
    position: relative;
}

使用前置文件添加文本。

http://api.jquery.com/prepend/

Answer 2

您的滚动条不会出现在第一个示例中，因为您使用absolute定位元素。请read more about positioning here。这是一个引用：

  

正在发生的是绝对定位的元素   将自己定位在 body 元素而不是   他们的直接父母。

这就是您的滚动条没有出现的原因。如果您将block元素设置为static，那么滚动就可以了。