<!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>