[Vue3] 滚动条自动滚动到底部

需求

在一个区域会依次打印log,随着log的加长,出现滚动条,而滚动条应该始终保持在最下方。
点击回到顶部按钮,可以使滚动条回到最上方

方案

  1. 在滚动区域添加ref
  2. log为一个数组,对其添加watch
  3. 在watch函数中,使用nextTick,通过ref控制该区域滚动高度
  4. 绑定ref,监测其height,使回到顶部按钮出现,并通过ref控制滚动条回到顶部

代码

// template
<div class="bottom-logs" ref="logRef">// antd vue中的back-top组件<a-back-top :target="() => logRef" :visibilityHeight="10" @click="handleBackToTop" /><LogData :logData="log"></LogData>
</div>// css
// 父级元素 display: flex
.bottom-logs {flex: 1;overflow: auto;
}
<script setup>
import { ref, watch, nextTick } from 'vue'
const logRef = ref();
// log为响应式数组
watch(log, () => {nextTick(() => {const content = logRef.value;content.scrollTo({ top: content.scrollHeight, behavior: "smooth" });});
}, {deep: true,
});const handleBackToTop = () => {const content = logRef.value;content.scrollTo({ top: 0, behavior: "smooth" });
}
</script>

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

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

相关文章

actuator/env;.js 漏洞修复

该问题是指Spring Boot Actuator中的一个漏洞&#xff0c;它涉及到暴露了Spring Boot应用的环境信息。Spring Boot Actuator是一个用于监控和管理Spring Boot应用的组件&#xff0c;它提供了多个端点&#xff08;endpoints&#xff09;&#xff0c;如健康检查、度量收集、环境信…

插件:Plugins

一、安装网格插件

重大变化,2024软考!

根据官方发布的2024年度计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试安排&#xff0c;2024年软考上、下半年开考科目有着巨大变化&#xff0c;我为大家整理了相关信息&#xff0c;大家可以看看&#xff01; &#x1f3af;2024年上半年&#xff1a;5月25日&am…

业务安全蓝军测评标准解读—业务安全体系化

目录 1.前言 2.业务蓝军测评标准 2.1 业务安全脆弱性评分(ISVS) 2.2 ISVS评分的参考意义<

高并发短视频系统设计:架构、存储与性能优化全解

1. 系统概况与需求分析 1.1 短视频系统简介 当前短视频行业的快速发展&#xff0c;加上用户对高清、流畅观看体验的需求不断提升&#xff0c;对系统的并发处理能力、视频处理速度、存储效率等多方面都提出了极高的要求。那么&#xff0c;我们首先需要了解一个完整的短视频系统…

msvcp140.dll是什么dll文件?msvcp140.dll文件的丢失要怎么去修复?

msvcp140.dll是什么dll文件&#xff1f;一般会问出这种问题的人&#xff0c;都是遇到了msvcp140.dll丢失的情况了&#xff0c;这时候你的一些程序是打不开的&#xff0c;你需要修复好msvcp140.dll文件才可以正常的打开程序&#xff0c;今天我们就来了解一下msvcp140.dll这文件&…

hcia datacom学习(11):vlan基础配置

1.vlan作用 &#xff08;1&#xff09;限制广播域&#xff1a;广播被限制在vlan内&#xff0c;不会在vlan间转发 &#xff08;2&#xff09;提高安全性&#xff1a;不同vlan的报文在传输时是相互隔离的 &#xff08;3&#xff09;灵活构建&#xff1a;交换机可以把不同终端分…

【实物+仿真设计】基于单片机的物流皮带传输监控系统设计

《基于单片机的物流皮带传输监控系统设计 实物仿真》 整体功能&#xff1a; 本设计采用以单片机为核心控制器&#xff0c;以及传感器检测部分作为输入部分&#xff0c;以报警、显示、洒水、排烟、电机停止模块作为输出部分&#xff0c;构成整个物流皮带传输监控系统。 本设计…

【Linux】信号(一)

信号我们将从信号产生&#xff0c;信号的保存&#xff0c;信号处理分别进行讲解~ 至少大思路是这样。开始之前还要进行一些基础知识的铺垫。 目录 从生活中提炼一些结论&#xff1a;信号概念的一些储备&#xff1a;信号产生&#xff1a;一、kill指令&#xff1a;二、键盘组合键…

win11右键二级菜单恢复成win10一级菜单

winr输入“cmd”回车&#xff0c;打开cmd窗口&#xff0c;输入如下命令&#xff0c;并回车。reg add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32" /f /ve提示cuccessfully&#xff0c;表示操作成功。重启电脑即可。 如下…

Qt信号槽与函数直接调用性能对比

1. 测试方法 定义一个类Recv&#xff0c;其中包含一个成员变量num和一个成员函数add()&#xff0c;add()实现num的递增。 另一个类Send通过信号槽或直接调用的方法调用Recv的add函数。 单独开一个线程Watcher&#xff0c;每秒计算num变量的增长数值&#xff0c;作为add函数被调…

element联级别选择器回显数据

需求&#xff1a;联级选择器获取的是一个数组&#xff0c;但是后端一般只存最后一级id&#xff0c;回显时需要自己处理数据 思路&#xff1a;利用最后一级id反查出上级id /***回显多级** param {key} 后端拿到的id* param {treeData} options绑定数据* returns*/changeDetSel…

4.2 索引及其操作

对数据库中的表进行查询操作时有两种搜索扫描方式&#xff0c;一种是全表扫描&#xff0c;另一种就是使用表上建立的索引进行扫描。 全表扫描要查找某个特定的行&#xff0c;必须从头开始一一查看表中的每一行&#xff0c;与查询条件做对比&#xff0c;返回满足条件的记录&…

【AndroidStudio旧版本BUG问题】完美解决运行报错问题Invalid keystore format

由于之前安装的版本导致AndroidStudio 运行报错&#xff1a;Invalid keystore format 在如下截图的路径中删了debug.keystore重新打开Android Studio运行一下就好了&#xff01;&#xff01;&#xff01; 下面介绍各个模块功能&#xff1a; adbkey 是 Android Debug Bridge (AD…

洛谷P2179 [NOI2012] 骑行川藏

题目描述 蛋蛋非常热衷于挑战自我&#xff0c;今年暑假他准备沿川藏线骑着自行车从成都前往拉萨。 川藏线的沿途有着非常美丽的风景&#xff0c;但在这一路上也有着很多的艰难险阻&#xff0c;路况变化多端&#xff0c;而蛋蛋的体力十分有限,因此在每天的骑行前设定好目的地&…

如何处理SSL证书过期问题?

SSL证书是网络安全的重要组成部分&#xff0c;它为网站提供了数据加密、身份验证和增强用户信任等多重保护。然而&#xff0c;SSL证书并非永久有效&#xff0c;其有效期通常为一年。当SSL证书过期时&#xff0c;网站安全性会受到影响&#xff0c;甚至可能面临安全风险。本文旨在…

好的一些网安资源

镜像&#xff1a;https://msdn.itellyou.cn/ 编程学习{ 菜鸟教程&#xff1a;https://www.runoob.com/ w3school&#xff1a;https://www.w3school.com.cn/ https://www.dotcpp.com/ http://zh.cppreference.com/ https://beginnersbook.com/ https://www.ai8py.com/ }…

《2024年网络安全预测:未来规划深度洞察》

2024 年打击网络对手的计划。 阅读报告&#xff0c;了解我们的专家对 2024 年网络安全行业的预测&#xff0c;包括&#xff1a; 攻击者将人工智能融入其行动中&#xff0c;防御者利用它来加强检测和响应 民族国家继续开展网络行动以实现其地缘政治目标 攻击者继续利用零日漏洞…

【Android面试题】请说一说ArrayList 如何保证线程安全,除了加关键字的方式 ?

面试题:请说一说ArrayList 如何保证线程安全,除了加关键字的方式 ? 这道题想考察什么? ArrayList的底层原理: ArrayList是基于数组实现的,是一个动态的数组,可以自动扩容。 但是ArrayList不是线程安全的,效率比较高,只能用于单线程环境 考察的知识点 ArrayList底层…

【UML用户指南】-08-对基本结构建模-图

目录 1、41视图 2、术语和概念 3、结构图 &#xff08;1&#xff09;类图&#xff08;class diagram&#xff09;&#xff1a; &#xff08;2&#xff09;构件图&#xff1a;&#xff08;component diagram&#xff09; &#xff08;3&#xff09;组合结构图&#xff1a;…