<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟聊天室显示语句保持最新显示</title>
<style>
*{
border-collapse: collapse;
}
.dialog_box{
width:400px;
height: 600px;
margin:0 auto;
background:#B4D9EA;
border:10px solid #B4D9EA;
}
.box_content{
width:100%;
height: 400px;
overflow-y: scroll;
}
.box_content p{
line-height: 30px;
word-wrap: break-word;
word-break: normal;
}
.input_content{
width:400px;
height: 200px;
margin-top: 10px
}
#input_info{
height: 130px;
resize: none;
width: 370px;
font-size: 24px;
padding: 15px;
color: #232323;
border:none;
background:#fff;
}
.btn_submit{
float: right;
padding: 5px 15px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="dialog_box">
<div class="box_content">
</div>
<div class="input_content">
<textarea name="" id="input_info"></textarea>
<button type="submit" class="btn_submit">提交</button>
</div>
</div>
<script src="jquery-min.js"></script>
<script>
$(function(){
var boxCon = $(".box_content"),
pLen;
$('.btn_submit').click(function(){
var p = document.createElement("p");
p.innerHTML = $('#input_info').val();
$('.box_content').append(p);
$('#input_info').val('')
var scrollH = 0;
pLen = $(".box_content p").length;
for(var i=0;i<pLen;i++){
scrollH += $(".box_content p").eq(i).outerHeight(true);
}
if(scrollH > 400){
boxCon.scrollTop(scrollH);
}
$('#input_info').focus();
})
})
</script>
</body>
</html>
