无法滚动查看旧输入

Question

在这里查看这个聊天示例。 https://bootsnipp.com/snippets/featured/simple-chat。所有代码也可以在链接中找到。

在输入许多消息后，旧消息在顶部消失，并且无法滚动以查看旧消息。那么我怎样才能引入一个卷轴，以便我可以看到非常旧的消息呢？

Answer 1

添加overflow＆amp; height属性到ul的父元素（在我的例子中名为“#innerFrame”）元素，如：

#innerFrame {
  height: 406px;
  overflow: auto;
}

每次按Enter键滚动到div的底部，请使用以下脚本：

var height = 0;
$('.frame ul li').each(function(i, value){
    height += parseInt($(this).height());
});

height += '';

$('#innerFrame').animate({scrollTop: height});

看一下 Demo Pen 。

希望这有帮助！

Answer 2

非常简单！看看：

您的HTML

我正在使用jQuery使一切更清晰，所以我需要包含脚本。我还在ul添加了ID。

您的CSS

添加了overflow: auto和height属性。基本！

你的JS

它就像

一样简单

$("#123").animate({ scrollTop: $('#123')[0].scrollHeight }, 500);

请查看我的pen。