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

最新推荐文章于 2024-05-10 21:13:28 发布

StudiousTiger

最新推荐文章于 2024-05-10 21:13:28 发布

阅读量5.6k

点赞数 13

分类专栏：踩坑分享文章标签： html css js

本文链接：https://blog.csdn.net/m0_45067620/article/details/123604617

版权

踩坑分享专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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

核心代码：目标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>

结果：
请添加图片描述

StudiousTiger

关注

13
点赞
踩
25

收藏

觉得还不错? 一键收藏
1
评论
【踩坑分享】滚动条保持在最底部的方法，做聊天室的时候会用到

最近在做一个聊天室，结果新发送的消息不能【置于底部】，找了很多方法，最后总结出最完美（主观）的方法，给大家分享一下核心代码：目标div.scrollTop = 目标div.scrollHeight;例子：<!DOCTYPE html><html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <titl
复制链接

扫一扫

专栏目录