vue实现对话框指定某个对话内容的滚动到指定位置(滚动到可视区域的中间位置)

1、使用el-scrollbar实现定位滚动(elementui组件库)
如何滚动:参考链接
比如说指定某条对话内容滚动到可视区域的中间
html结构:

    <div class="chat-list" id="chat-list"><el-scrollbar ref="scroll" style="height: 100%;"><div v-if="chatListAll.length === 0 && !callEnd" style="color: rgba(0, 0, 0, 0.4); text-align: center;">暂无对话</div><chat-itemv-for="(chat, index) in chatListAll":key="index":chat="chat":searchKey="searchKey"ref="chat":class="chat.isActive ? 'active' : ''"/><div v-if="callEnd" style="color: rgba(0, 0, 0, 0.4); text-align: center;">本次通话已结束</div></el-scrollbar></div>

js计算滚动的代码:

		scrollUncivilized(data) {this.$nextTick(() => {let chatDiv = document.querySelector('#chat-list');console.log(chatDiv.offsetHeight);// const parentHeight = chatDiv.offsetHeight - 48; // 减去上下paddingconst parentHeight = chatDiv.clientHeight; // 直接获取可视区域的高度if (this.chatListAll.length) {const index = this.chatListAll.findIndex(item => item.warning === data);if (index > -1) {const itemOffsetTop = this.$refs.chat[index].$el.offsetTop; // item顶部到父元素顶部的距离const itemOffsetHeight = this.$refs.chat[index].$el.offsetHeight; // 元素本身的高度// if (this.$refs.chat[index].$el.offsetTop > parentHeight) {this.$refs['scroll'].wrap.scrollTop = itemOffsetTop - (parentHeight - itemOffsetHeight) / 2;// }// this.$refs.chat[index].$el.scrollIntoView(true);console.log(this.$refs['scroll'].wrap.scrollTop);}}});},

2、使用ScrollIntoView滚动到可视区域
如果对滚动的位置要求不高,只是滚动到可视区域内,可以使用ScrollIntoView滚动到可视区域的顶部或底部
参考链接

参考识别:scrollTop、offsetTop、offsetHeight、clientHeight等
vue实现聊天框自动滚动参考链接

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/174506.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录算法训练营第六十天|84. 柱状图中最大的矩形

84. 柱状图中最大的矩形 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 示例 1: 输入&#xff1a;heights [2,1,5,6,2,3] 输出&#xff1a;10 解释…

C--51--WiFi模块ESP-01S ( 路由服务器 )

ESP-01S当成服务器&#xff1a; 1、接线 &#xff08;接CH340接入pc&#xff09; USB转TTL插入电脑&#xff0c;TX/RX交叉接线&#xff0c;VCC接5V&#xff0c;GND接地 查询IP地址&#xff1a;ATCIFSR 2、建立AT指令使能连接 一、配置网络调试助手 协议类型&#xff1a;TCP C…

Linux——使用命令查看文件和文件夹数量

目录 一、相关命令参数解析二、查看当前目录下的文件数量2.1 包含子目录中的文件2.2 不包含子目录中的目录 三、查看当前目录下的文件夹个数3.1 不包含目录中的目录3.2 包含目录中的目录 四、查看当前文件夹下叫某某的文件的数量实例 五、总结 一、相关命令参数解析 "&qu…

java方法引用

MethodReference 前言特定类任意方法引用函数接口特定类调用 前言 JDK1.8之后提供是Lambda&#xff0c;它可以让开发者自定义函数接口中抽象方法的实现&#xff0c;方法引用可以让开发者直接引用已存在的方法。 方法引用的形式: 类::静态方法 类::特定类任意方法 对象::实例方…

MyBatis 操作数据库(入门)

一&#xff1a;MyBatis概念 (1)MyBatis &#x1f497;MyBatis是一款优秀的持久层框架&#xff0c;用于简化JDBC的开发 (2)持久层 1.持久层 &#x1f49c;持久层&#xff1a;持久化操作的层&#xff0c;通常指数据访问层(dao)&#xff0c;是用来操作数据库的 2.持久层的规范 ①…

leetcode_828 统计子串中的唯一字符

1. 题意 统计一个字符串的所有子串中唯一字符的数量。 例如: "ABA"的字串对应的唯一字符数量 “A”&#xff1a; 1 “AB”&#xff1a;2 “ABA”&#xff1a;1 “B”&#xff1a;1 “BA”&#xff1a;2 “A”&#xff1a;1 求和为8 统计子串中的唯一字符 2. 题解 …

Doris的数据模型

Doris 的数据模型主要分为3类:Aggregate、Uniq、Duplicate 1 Aggregate 模型 表中的列按照是否设置了AggregationType,分为 Key(维度列)和 Value(指标列)。没有设置AggregationType的称为 Key,设置了AggregationType的称为Value。 当我们导入数据时,对于Key列相同的行会…

竞赛选题 题目:基于卷积神经网络的手写字符识别 - 深度学习

文章目录 0 前言1 简介2 LeNet-5 模型的介绍2.1 结构解析2.2 C1层2.3 S2层S2层和C3层连接 2.4 F6与C5层 3 写数字识别算法模型的构建3.1 输入层设计3.2 激活函数的选取3.3 卷积层设计3.4 降采样层3.5 输出层设计 4 网络模型的总体结构5 部分实现代码6 在线手写识别7 最后 0 前言…

前缀和——1314. 矩阵区域和

文章目录 &#x1f3a4;1. 题目&#x1f3a4;2. 算法原理&#x1f3a4;3. 代码实现 &#x1f3a4;1. 题目 题目链接&#xff1a;1314. 矩阵区域和 - 力扣&#xff08;LeetCode&#xff09; 给你一个 m x n 的矩阵 mat 和一个整数 k &#xff0c;请你返回一个矩阵 answer &#…

[极客大挑战2023] Crypto/PWN/Reverse

这个网站真辛苦&#xff0c;每次都要回到all&#xff0c;屏幕随时卡。界面有待进步老远。也不提示结束&#xff0c;结果现在才听说结束了&#xff0c;才开始记录一下。 还跟往常一样&#xff0c;WM不作&#xff0c;其它也AK不了&#xff0c;总是差点。 Crypto SignIn 53594…

C语言错误处理之<errno.h>与<error.h>

目录 前言 错误号处理方式 errno.h头文件 常见的宏 error.h头文件 参数解释&#xff1a; 关于的”__attribute__“解释&#xff1a; 关于“属性”的解释&#xff1a; 实例一&#xff1a; 实例二&#xff1a; error.h与errno.h的区别 补充内容&#xff1a; 前言 …

6款AI工具网站,赶紧收藏,以备不时之需

1、海鲸AI-支持AI对话、AI文档解析、AI绘画 https://www.atalk-ai.com 海鲸AI是一个AI应用网站&#xff0c;同时支持PC和移动端&#xff0c;它在一个页面上提供了多种模型&#xff08;GPT3&#xff0c;GPT4&#xff0c;文心一言&#xff0c;通义千问&#xff0c;智谱AI&#…

【Vue】记事本

上一篇&#xff1a;Vue的指令 https://blog.csdn.net/m0_67930426/article/details/134599378?spm1001.2014.3001.5501 本篇所需指令&#xff1a; v- for v-model v-on v-show 目录 删除功能 添加功能 统计功能 清空功能 v-show 删除功能 <!DOCTYPE html> …

一、Lua基础

文章目录 一、Lua是什么二、Lua特性&#xff08;一&#xff09;轻量级&#xff08;二&#xff09;可扩展&#xff08;三&#xff09;其它特性 三、Lua安装四、Lua应用 看到评论说&#xff0c;C让我见识了语言的严谨与缜密&#xff0c;lua让我见识到了语言的精巧与创新&#xff…

Linux:通过VMWare,定制化Linux系统

一、原理图 二、新增磁盘&#xff08;对应上图sdb盘&#xff09; 三、挂载磁盘 主要是四步&#xff1a;查看磁盘&#xff0c;分区磁盘&#xff0c;格式化磁盘&#xff0c;挂载磁盘 1、查看磁盘 2、分区磁盘 3、格式化磁盘 4、挂载磁盘 创建两个备用目录&#xff0c;用于磁盘…

【Kotlin】引入与基础语法

文章目录 Kotlin的特性Kotlin优势Kotlin的安卓项目变量变量保存了指向对象的引用优先使用val来避免副作用 后端变量Backing Fields延迟初始化 Kotlin的特性 它更加易表现&#xff1a;这是它最重要的优点之一。你可以编写少得多的代码。Kotlin是一种兼容Java的语言Kotlin比Java…

1、windows10系统下Qt5.12.0与卸载

一、安装包下载 1、Qt社区下载 https://download.qt.io/archive/qt/5.12/5.12.10/qt-opensource-windows-x86-5.12.10.exe 2、百度网盘下载 链接&#xff1a;百度网盘 请输入提取码 3、Qt官网下载&#xff1a; Try Qt | 开发应用程序和嵌入式系统 | Qt 二、安装提示 下…

nodejs+vue+elementui网上家电家用电器数码商城购物网站 多商家

基于vue.js的恒捷网上家电商城系统根据实际情况分为前后台两部分&#xff0c;前台部分主要是让用户购物使用的&#xff0c;包括用户的注册登录&#xff0c;查看公告&#xff0c;查看和搜索商品信息&#xff0c;根据分类定位不同类型的商品&#xff0c;将喜欢的商品加入购物车&a…

【html+css】表单元素

目录 表单元素 展示图 简约写法&#xff1a; 完美写法 表单元素 输入框 单选框 复选框 下拉框 按钮 展示图 简约写法&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><t…

华大基因在合规管理、高质量发展方面将迈上新的台阶

今年6月&#xff0c;华大基因顺利通过了国际领先标准、测试及认证机构BSI的严格审核&#xff0c;获得GB/T 35770-2022 / ISO 37301:2021合规管理体系认证证书&#xff0c;成为行业内率先获此国际认证的企业。 ISO 37301合规管理体系认证是国际通用的合规管理体系认证标准&…