【踩坑分享】滚动条保持在最底部的方法，做聊天室的时候会用到-CFANZ编程社区

【踩坑分享】滚动条保持在最底部的方法，做聊天室的时候会用到

最近在做一个聊天室，结果新发送的消息不能【置于底部】，找了很多方法，最后总结出最完美（主观）的方法，给大家分享一下

核心代码：目标div.scrollTop = 目标div.scrollHeight;

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>将滚动条（scrollbar）保持在最底部的方法</title>
    <style>
        #chat-box{
            height: 100px; width: 300px; margin-bottom: 20px; overflow:auto; border: 1px solid #999;
        }
    </style>
    <script type="text/javascript">
        function send() {
            var chatBox = document.getElementById('chat-box');
            chatBox.innerHTML = chatBox.innerHTML + 'news_' + new Date().getTime() + '<br />';
            chatBox.scrollTop = chatBox.scrollHeight;  // 【核心代码】
        } 
    </script>
</head>
<body>
    <div>
        <h3>【滚动条】保持在【最底部】的方法</h3>
        <div>
            <div id="chat-box"></div>
            <input type="button" value="发送消息" onclick="send();">
        </div>
    </div>
</body>
</html>

结果：
请添加图片描述

0 条评论