我正在尝试构建一个简单的聊天系统,例如Facebook与Messenger一样,将新消息保留在最底部。但是他们添加了标题,并保留了最后一条消息的固定位置,当然还有滚动条
Here is my try... but no scrollbar and the header do not move too.
请记住,我不需要固定的标题。我确实读到的问题是,聊天div中的“ height:auto”使其变为“ flow”,但这就是保持聊天高度动态的原因。
好吧……如果有人有更好的解决方案将消息放在底部,标题放在顶部,并且到达消息时,标题变得发粘,请。
PS: With only the ccs3 display:flex, I been able to achieve my goal here.. very simple.. It's possible without ? even with JS''
最佳答案
哟,看看这个
(function(i) {
$(".click").click(function() {
if (parseInt($(".chat .placeholder").css("margin-bottom")) > 32) {
$(".chat .placeholder").css("margin-bottom", "-=50px");
}
else if ($(".chat .placeholder").css("margin-bottom") == "32px") {
$(".chat .placeholder").css("margin-bottom", "0px");
}
$(".chat").append("<p>hey " + (++i) + "</p>");
$(".chat").scrollTop( $(".chat").prop('scrollHeight') - $(".chat").outerHeight() );
})
})(0);
.main .chat {
width: 100%;
position: absolute;
top: 30px;
background: red;
box-sizing: border-box;
height: 200px;
overflow: auto;
}
.chat p {
background: blue;
padding: 16px 20px;
margin: 0;
}
.main .header {
position: relative;
background: yellow;
height: 18px;
}
p.placeholder {
width: 100%;
padding: 0;
margin-top: 0;
margin-bottom: 132px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' class='click' value='add'>
<div class='main'>
<div class='chat'>
<p class="placeholder header">Header</p>
<p>hello</p>
</div>
</div>