el-scrollbar 获取滚动条高度 并将滚动条保持在低端

首先我们用ref绑定一个 scrollbar

  <el-scrollbar style="height: 100%;" ref="chatScrollRef" @scroll="scrollTest">

用scroll触发滚动事件,一路滚到最底下,观察三个属性

const scrollTest = ({scrollTop}) => {console.log(scrollTop);const wrap = chatScrollRef.value?.wrapRefif (wrap) {console.log("------" + wrap.scrollHeight);console.log("++++++" + wrap.clientHeight);}
}

在这里插入图片描述
得出结论,当 scrollTop + clientHeight = scrollHeight 的时候,滚动条会达到最低端

1. 得到滚动条距离顶端高度

先绑定ref

const wrap = chatScrollRef.value?.wrapRef
console.log(wrap.scrollTop);

2. 将滚动条调整在最低端

先绑定ref

const scrollToBottom = () => {const wrap = chatScrollRef.value?.wrapRefif (wrap) {wrap.scrollTop = wrap.scrollHeight - wrap.clientHeight}})

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

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

相关文章

MyBatis-Plus 的 updateById 方法不更新 null 值属性的问题

项目场景&#xff1a; 使用Mybatis-plus的updateById去更新实体类的时候&#xff0c;如果设置实体类中的某个字段为null&#xff0c;会导致为null的字段不做更新操作 问题描述 updateById方法 不会更新null值 解决方案&#xff1a; 在字段上加上 TableField(updateStrategy …

STC89C52单片机模拟实现洗衣机控制 Proteus仿真

用直流电机转动模拟洗衣机。要求有弱洗、普通洗、强洗三种模式,可通过按键选择相应模式。要求能够设置洗衣时长,可以通过按键选择15、30、45、60、90分钟。定时结束时蜂鸣器报警提示。LCD显示相关信息。 基本功能描述用单片机模拟实现洗衣机控制。用直流电机转动模拟洗衣机运…

游戏引擎学习第290天:完成分离渲染

game_sim_region.cpp&#xff1a;在BeginSim中移除EntityOverlapsRectangle调用 现在我们接近一个关键点&#xff0c;虽然还没完全结束&#xff0c;但我们已经把所有东西迁移到了一个新概念上——即那些临时创建的控制器结构&#xff0c;称为“脑”&#xff08;brains&#xf…

JavaScript性能优化实战(12):大型应用性能优化实战案例

在前面的系列文章中,我们探讨了各种JavaScript性能优化技术和策略。本篇将聚焦于实际的大型应用场景,通过真实案例展示如何综合运用这些技术,解决复杂应用中的性能挑战。 目录 电商平台首屏加载优化全流程复杂数据可视化应用性能优化案例在线协作工具的实时响应优化移动端W…

Linux 安装 Unreal Engine

需要对在unreal engine官网进行绑定github账号&#xff0c;然后到unreal engine github仓库中进行下载对应的版本&#xff0c;并进行安装unreal engine官网 github地址

2.2.4

import pandas as pd from sklearn.model_selection import train_test_split from sklearn.linear_model import LinearRegression from sklearn.metrics import mean_squared_error, r2_score import joblib from xgboost import XGBRegressor # 加载数据集 file_path 大学…

使用IDEA创建Maven版本的web项目以及lombok的使用

1.新建项目 2.修改pom.xml 3.修改项目结构 4.在main/java下面写一个Servlet测试一下 然后当前页面往下滑 -Dfile.encodingUTF-8编写一句输出语句&#xff0c;测试是否成功部署配置&#xff0c;并选择到正确的位置&#xff1a; 回车以后 再回到idea里面&#xff0c;发现控…

【数据结构】1-3 算法的时间复杂度

数据结构知识点合集&#xff1a;数据结构与算法 • 知识点 • 时间复杂度的定义 1、算法时间复杂度 事前预估算法时间开销T(n)与问题规模 n 的关系&#xff08;T 表示 “time”&#xff09; 2、语句频度 算法中语句的执行次数 对于以上算法&#xff0c;语句频度&#xff1a;…

【Python 算法零基础 3.递推】

压抑与痛苦&#xff0c;那些辗转反侧的夜&#xff0c;终会让我们更加强大 —— 25.5.16 一、递推的概念 递推 —— 递推最通俗的理解就是数列&#xff0c;递推和数列的关系就好比 算法 和 数据结构 的关系&#xff0c;数列有点像数据结构中的线性表(可以是顺序表&#xff0c;也…

淘宝扭蛋机系统开发前景分析:解锁电商娱乐化新蓝海

在电商行业竞争日益白热化的当下&#xff0c;如何通过创新玩法提升用户粘性、激活消费潜力&#xff0c;成为平台突破增长瓶颈的关键。淘宝扭蛋机系统作为“电商娱乐”的跨界融合产物&#xff0c;正凭借其趣味性、随机性和社交属性&#xff0c;成为撬动年轻消费市场的潜力工具。…

NHANES指标推荐:UHR

文章题目&#xff1a;Elevated log uric acid-to-high-density lipoprotein cholesterol ratio (UHR) as a predictor of increased female infertility risk: insights from the NHANES 2013-2020 DOI&#xff1a;10.1186/s12944-025-02521-w 中文标题&#xff1a;对数尿酸与高…

【c库主要功能】

1 stdio.h 功能&#xff1a;处理文件和标准输入/输出流的各种函数和类型 包含变量&#xff1a; size_t&#xff1a;无符号整形&#xff0c;sizeof关键字的结果FILE&#xff1a;文件流类型&#xff0c;适合存储文件流信息的对象类型 库宏&#xff1a; stderr、stdin、stdout&a…

npm 报错 gyp verb `which` failed Error: not found: python2 解决方案

一、背景 npm 安装依赖报如下错&#xff1a; gyp verb check python checking for Python executable "python2" in the PATH gyp verb which failed Error: not found: python2 一眼看过去都觉得是Python环境问题&#xff0c;其实并不是你python环境问题&#xf…

常见的请求头(Request Header)参数

1. Accept 作用&#xff1a;告知服务器客户端支持的响应数据格式&#xff08;如 JSON、XML、HTML&#xff09;。示例&#xff1a;Accept: application/json&#xff08;优先接收 JSON 格式数据&#xff09;。 2. Content-Type 作用&#xff1a;说明请求体的数据格式&#xff08…

计算机网络:移动通信蜂窝网络指的是什么?

无线基站的蜂窝网络(Cellular Network)是现代移动通信系统的核心架构,其核心思想是通过蜂窝状小区划分和频率复用,实现广域覆盖、高效频谱利用和动态资源管理。以下从设计原理、网络架构、关键技术及实际挑战等方面深入解析蜂窝网络。 一、蜂窝网络的设计原理 1. 蜂窝结构…

【AI论文】对抗性后期训练快速文本到音频生成

摘要&#xff1a;文本到音频系统虽然性能不断提高&#xff0c;但在推理时速度很慢&#xff0c;因此对于许多创意应用来说&#xff0c;它们的延迟是不切实际的。 我们提出了对抗相对对比&#xff08;ARC&#xff09;后训练&#xff0c;这是第一个不基于蒸馏的扩散/流模型的对抗加…

Word文档图片和图表自动添加序号

0 Preface/Foreword Word文档是办公常用的文档&#xff0c;里面经常会插入图片或者表格&#xff0c;当表格和图片数量过多时&#xff0c;如果有些图片需要删除或者添加&#xff0c;那么大概率需要修改大量图片的序号或者引用记录&#xff0c;如果通过手工一个一个修改&#xf…

软件架构设计--期末复习

质量属性 参考视频&#xff1a;【13.5质量属性-架构评估】 在软件架构中&#xff0c;质量属性是衡量系统设计优劣的关键指标&#xff0c;通常分为运行时属性和非运行时属性。以下是一些常见的质量属性&#xff1a; 一、软件架构中的质量属性 运行时属性&#xff1a; 性能&am…

多指标组合策略思路

一种基于多种技术指标和日历因素的综合交易策略&#xff0c;旨在通过复杂的条件判断来预测市场的短期走势&#xff0c;并据此进行买卖操作。 策略概述 该策略的核心思想是通过结合多个技术指标和日历因素来判断市场的短期趋势&#xff0c;并在合适的时机进行买入或卖出操作。 具…

STM32 HAL驱动程序 内部Flash

hal_flash.c #include "hal_flash.h"volatile uint32_t flashWriteOffset SYS_APP_BAK_SAVE_ADDR_BASE; volatile uint32_t flashReadOffset SYS_APP_BAK_SAVE_ADDR_BASE;/* MCU OTA */ /*擦除指定的Flash页*/ void flash_erase_page(uint8_t flashPage , uint32_…