vue的div滚动条自动到底部_如何让移动端聊天框的滚动条自动置底

最新推荐文章于 2024-08-27 11:37:50 发布

欢乐马欢

最新推荐文章于 2024-08-27 11:37:50 发布

阅读量2.5k

点赞数 3

文章标签： vue的div滚动条自动到底部

本文链接：https://blog.csdn.net/weixin_29467909/article/details/112378077

版权

本文介绍了如何在Vue中使用scrollTop属性使聊天对话框的滚动条自动定位到最底部，特别是在更新周期的updated阶段应用此方法，可以确保消息发送后滚动条始终位于最新消息处。

摘要由CSDN通过智能技术生成

通过使用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>

vue聊天对话框滚动条自动定位到最底部

这么写的话只能定位到发送消息前的前一条消息，不能定位到最底部

.then(
         this.$nextTick(() => {
         let msg = document.getElementById('chatRecord') // 获取对象
              msg.scrollTop = msg.scrollHeight // 滚动高度
         })
 )

解决：写在生命周期updated里面可以完美定位！

updated(){
        // 聊天定位到底部
          let ele = document.getElementById('chatRecord');
          ele.scrollTop = ele.scrollHeight;
      },

欢乐马欢

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫