聊天框让滚动条保持到最底端的一种方式 scrollTop!

最新推荐文章于 2023-07-12 13:16:30 发布

咸鱼网管

最新推荐文章于 2023-07-12 13:16:30 发布

阅读量5.6k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/qq_34028443/article/details/81205486

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

通过使用scrollTop来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>对话框</title>
    <style type="text/css">
        .talk_show {
            width: 400px;
            height: 100px;
            border: 1px solid #666;
            overflow: auto;
        }
    </style>
    <!-- -------------实现代码的开始------------- -->
    <script type="text/javascript"> 
    function fun() {
        var now = new Date();
        var oTalk_sub = document.getElementById('talksub');  
        var oWords = document.getElementById('words');
        var sTalk = '<div>插入一条信息使滚动条向上翻卷!!! '
                    + now.getTime()+'</div>'
        oWords.innerHTML = oWords.innerHTML + sTalk
        oWords.scrollTop = oWords.scrollHeight;
    }
 
    </script>
</head>
<body>
        <h3>----将滚动条保持到最底端---</h3>
        <div class="talk_show" id="words"></div>
        <div>
        <input type="button" value="发 送" onclick="fun()" id="talksub" style="margin-top:20px ">
        </div>
         <!-- -------------实现代码的结束------------ -->
</body>
 
</html>