scrollIntoView实现h5聊天内容向上滚动

李维山
2018-11-29 10:39:25
前端
js

写一个毫不考虑样式的例子：

<!DOCTYPE html>
<html>
<head>
<title>chat</title>
<script src="./jquery-2.0.0.min.js"></script>
</head>
<style type="text/css">
.message{
    height:200px;
    width:200px;
    overflow-y: auto;	
}
</style>
<body>
    <div class="message">
        <!-- <p class='msg'>666</p> -->
    </div>
    <input type="text" name="text" id="text">
    <button onclick="sendmsg()">发送</button>
</body>
</html>
<script type="text/javascript">
//发送消息
function sendmsg(){
    var text = $('#text').val();
    var html = "<p class='msg'>"+text+"</p>";
    $(".message").append(html);
    $('#text').val('');
    setTimeout(function () {
        ($('.message').children("p:last-child")[0]).scrollIntoView();
    },100);
}
</script>

实现效果：