vue窗口内容滚动到底部实现过程

更新时间：2025年12月17日 09:00:53 作者：巨蟹座守护骑士

这篇文章主要介绍了vue窗口内容滚动到底部实现过程,以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家,

vue窗口内容滚动到底部

onMounted(() => {
  scrollToBottom()
})
// 滚动到底部方法
const scrollToBottom = () => {
  // 获取聊天窗口容器
  let chatRoom: any = document.querySelector(".chat-content");
  // 滚动到容器底部
  chatRoom.scrollTop = chatRoom.scrollHeight;
}

效果

聊天窗口代码

<template>
  <div class="chat">
    <div class="left">
      <div class="top">
        <ClientOnly>
          <el-input v-model="search" style="width: 240px;" placeholder="搜索联系人" :suffix-icon="Search" />
        </ClientOnly>
      </div>
      <div class="ul">
        <div class="li" v-for="item, i in 5" :key="i">
          <div class="img">
            <img src="/assets/images/head/user.jpg" alt="">
          </div>
          <div class="content">
            <div class="name">前端</div>
            <div class="text text_ov1">大佬，请问这个怎么写？看到请回复一下，谢谢</div>
          </div>
          <div class="tiem">
            18:00
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="chat-name">前端</div>
      <!-- 聊天内容 -->
      <div class="chat-content">
        <!-- 收到的 -->
        <div class="chat-item">
          <div class="chat-img">
            <img src="/assets/images/head/user.jpg" alt="">
          </div>
          <div class="chat-text">
            大佬，请问这个怎么写？看到请回复一下，谢谢!大佬，请问这个怎么写？看到请回复一下，谢谢大佬，请问这个怎么写？看到请回复一下，谢谢大佬，请问这个怎么写？看到请回复一下，谢谢
          </div>
        </div>
        <!-- 发送的 -->
        <div class="my_chat-item" v-for="item, i in 10" :key="i">
          <div class="chat-img">
            <img src="/assets/images/head/user.jpg" alt="">
          </div>
          <div class="chat-text">
            大佬，请问这个怎么写？看到请回复一下，谢谢!大佬，请问这个怎么写？看到请回复一下，谢谢大佬，请问这个怎么写？看到请回复一下，谢谢大佬，请问这个怎么写？看到请回复一下，谢谢
          </div>
        </div>
      </div>
      <!-- 输入框 -->
      <div class="chat-input">
        <div class="rest">
          <div class="ul">
            <div class="li">
              <i class="iconfont icon-smile"></i>
            </div>
            <div class="li">
              <i class="iconfont icon-tupian"></i>
            </div>
          </div>
          <div class="publish">发送</div>
        </div>
        <ClientOnly>
          <el-input type="textarea" resize="none" :autosize="{ minRows: 6, maxRows: 6 }" maxlength="500" show-word-limit
            placeholder="" v-model="message">
          </el-input>
        </ClientOnly>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons'
let search = ref("");
let message = ref("");
onMounted(() => {
  scrollToBottom()
})
// 滚动到底部方法
const scrollToBottom = () => {
  // 获取聊天窗口容器
  let chatRoom: any = document.querySelector(".chat-content");
  // 滚动到容器底部
  chatRoom.scrollTop = chatRoom.scrollHeight;
}

</script>

<style scoped lang="scss">
.chat {
  margin-left: 22px;
  width: 1030px;
  border-radius: 12px;
  background: #ffffff;
  display: flex;

  .left {
    padding-top: 10px;
    border-right: 1px solid #dddddd;
    width: 255px;

    .top {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 55px;
    }

    .ul {
      .li {
        padding: 15px;
        background-color: #fff;
        height: 66px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #E4E7ED;
        cursor: pointer;

        &:hover {
          background: #F1F6FF;
        }

        .img {
          width: 42px;
          height: 42px;
          overflow: hidden;
          border-radius: 50%;
          margin-right: 10px;

          img {
            width: 100%;
          }
        }

        div.content {
          width: 60%;

          div.name {
            font-size: 14px;
            color: #303133;
          }

          div.text {
            margin-top: 2px;
            font-size: 12px;
            color: #3D3D3D;
          }
        }

        div.tiem {
          font-size: 12px;
          color: #3D3D3D;
        }

      }
    }
  }

  .right {
    padding-top: 10px;
    flex: 1;

    .chat-name {
      border-bottom: 1px solid #dddddd;
      height: 55px;
      line-height: 55px;
      padding-left: 20px;
    }

    /**聊天框*/
    div.chat-content {
      overflow-y: scroll;
      height: 500px;
      padding: 20px 10px;

      &::-webkit-scrollbar {
        /**display: none;*/
        width: 5px !important;
      }


      /**我接收的*/
      div.chat-item {
        display: flex;
        margin-top: 20px;

        div.chat-img {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 5px;

          img {
            width: 100%;
          }
        }

        div.chat-text {
          background: #EEEEEE;
          border-radius: 6px;
          padding: 10px;
          margin-right: 200px;
          font-size: 14px;
          color: #3D3D3D;
          line-height: 20px;
          flex: 1;
        }
      }

      /**我发送的*/
      div.my_chat-item {
        display: flex;
        flex-direction: row-reverse;
        margin-top: 20px;

        div.chat-img {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          overflow: hidden;
          margin-left: 5px;

          img {
            width: 100%;
          }
        }

        div.chat-text {
          background: #EEEEEE;
          border-radius: 6px;
          padding: 10px;
          flex: 1;
          margin-left: 200px;
          font-size: 14px;
          color: #3D3D3D;
          line-height: 20px;
        }
      }
    }

    .chat-input {
      height: 30%;
      border-top: 1px solid #dddddd;

      .rest {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 20px;

        .ul {
          display: flex;

          .li {
            margin-right: 20px;

            i {
              color: #3D3D3D;
              cursor: pointer;
            }
          }
        }
      }

      // 清除文本域边框
      :deep(.el-textarea__inner) {
        box-shadow: 0 0 0 0px;
      }

      :deep(.el-textarea__inner:hover) {
        box-shadow: 0 0 0 0px;
      }

      :deep(.el-textarea__inner:focus) {
        box-shadow: 0 0 0 0px;
      }

      .publish {
        cursor: pointer;
        width: 74px;
        height: 28px;
        border-radius: 14px;
        text-align: center;
        line-height: 28px;
        background: #fff;
        color: #888888;
        font-size: 14px;
        border: 1px solid #888888;

        &:hover {
          background: #C4302C;
          color: #fff;
          border: 1px solid #ffffff00;
        }
      }
    }
  }
}
</style>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue简单封装axios插件和接口的统一管理操作示例
这篇文章主要介绍了vue简单封装axios插件和接口的统一管理操作,结合具体实例形式分析了vue中axios插件安装、配置及接口统一管理具体操作技巧,需要的朋友可以参考下
2020-02-02
Vue3模板引用的操作方式示例详解
这篇文章主要为大家介绍了Vue3模板引用的操作方式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
vuex5中的Pinia插件机制
这篇文章主要介绍了vuex5中的Pinia插件机制，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vue3 HTTP请求中的axios示例详解
Axios 是一个简单的基于 promise 的 HTTP 客户端，适用于浏览器和 node.js。Axios 在具有非常可扩展的接口的小包中提供了一个简单易用的库，这篇文章主要介绍了vue3-HTTP请求之axios,需要的朋友可以参考下
2022-12-12
vue+iview Table表格多选切换分页保持勾选状态
这篇文章主要为大家详细介绍了vue+iview Table表格多选切换分页保持勾选状态，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
前端Vue.js实现json数据导出到doc
这篇文章主要介绍了前端Vue.js实现json数据导出到doc，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
极速上手 VUE 3 teleport传送门组件及使用语法
teleport 传送门组件，提供一种简洁的方式，可以指定它里面的内容的父元素，也就是说teleport 中的内容允许我们控制在任意的DOM中，使用简单，对VUE 3 teleport传送门相关知识感兴趣的朋友一起看看吧
2021-10-10
Vue之关于异步更新细节
这篇文章主要介绍了Vue之关于异步更新细节,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
vue中如何利用js函数截取时间的年月日时分秒
时分秒都是跟月份一样,从0开始数的,不用+1,因为月是1-12月,而时分秒是0-23和0-59,下面这篇文章主要给大家介绍了关于vue中如何利用js函数截取时间的年月日时分秒的相关资料,需要的朋友可以参考下
2022-11-11
在Vue3中使用Vue Tour实现页面导览
Vue Tour 是一个方便的 Vue.js 插件,它可以帮助我们在网站或应用中实现简单而灵活的页面导览功能,本文我们将介绍如何在 Vue 3 中使用 Vue Tour,并通过示例代码演示其基本用法,需要的朋友可以参考下
2024-04-04

vue窗口内容滚动到底部实现过程

目录

vue窗口内容滚动到底部

效果

聊天窗口代码

总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具