Vue2聊天框滚动条定位

钓了猫的鱼儿

已于 2024-02-20 08:55:16 修改

阅读量276

点赞数 4

分类专栏： Vue 文章标签：前端 javascript vue.js 聊天框定位问题

于 2024-02-20 08:46:48 首次发布

本文链接：https://blog.csdn.net/qq_43249953/article/details/136181971

版权

Vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<template>
    <div>
        <div id="chatBox" class="chatBox">
            <div class="content" v-for="(item, index) in messageContent" :key="index">
                <div>{{ item }}</div>
            </div>
        </div>
        <div><el-button @click="handleSend">发送</el-button></div>
    </div>
</template>
  
<script>
export default {
    name: "Chat",
    data() {
        return {
            messageContent: []
        };
    },
    watch: {
        // 监听当前消息列表，更新时，保持滚动条位于底部
        messageContent: function scrollToBottom() {
            this.$nextTick(() => {
                let message = document.getElementById('chatBox')
                // 滚动滑钮到滚动条顶部的距离=滚动条的高度
                message.scrollTop = message.scrollHeight
            })
        }
    },
    methods: {
        handleSend() {
            this.messageContent.push("哈哈哈哈");
        }
    }
};
</script>
  
<style lang="less" scoped>
.chatBox {
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid red;
    height: 100px;
}
</style>

<template>
    <div>
      <Chat />
    </div>
  </template>
   
  <script>
  import Chat from "@/components/Chat";
  export default {
    name: "HomeView",
    components: { Chat },
  };
  </script>
   
  <style lang="less" scoped>

  </style>