【Element-plus】如何让滚动条永远在最底部(支持在线演示)
如何让滚动条永远在最底部
- 一、适用场景
- 二、实现思路
- 三、效果图
- 四、在线演示
- 五、完整代码
一、适用场景
在某些场景下,你可能希望滚动条保持在最底部,以确保用户始终看到最新的内容或信息。如:在实时聊天应用程序中,当新消息到达时,滚动条自动滚动到最底部,方便用户立即看到最新的对话。
二、实现思路
- 使用 nextTick 等待 DOM 更新完成,然后计算出内部容器的总高度 max(如:当前可视区只有第4、5、6项,前面的3项已经由于滚动的关系不可见了。我们需要获取的总高度是包含 1~6 项的总高,而不仅是可视的高度);
- 当出现滚动条时,因为滚动条到容器顶部的距离,一定恒小于在第一步计算出来的内部容器的总高度 max。
- 所以,每当新增一项或者删除一项时,我设置滚动条到顶部的距离为第一步计算出来的内部容器的总高度 max,就可以让滚动条滚动到底部了。
三、效果图

四、在线演示
点击此处即可跳转到 Element Plus Playground
五、完整代码
下面使用的是vue3语法:
<template><div class="header"><el-button @click="add">新增一项</el-button><el-button @click="onDelete">删除一项</el-button><el-button @click="setScrollToTop">回到顶部</el-button></div><el-scrollbar ref="scrollbarRef" max-height="200px" always @scroll="handleScroll"><div ref="innerRef"><p v-for="item in count" :key="item" class="scrollbar-demo-item">{{ item }}</p></div></el-scrollbar>
</template>
import { nextTick, ref } from 'vue'const count = ref(5) // 计数器
const scrollbarRef = ref() // 滚动条实例
const innerRef = ref() // 计数器内部实例/*** 控制滚动条滚动到容器的底部*/
async function setScrollToBottom() {// 注意:需要通过 nextTick 以等待 DOM 更新完成await nextTick()const max = innerRef.value!.clientHeightconsole.log('max', max) // 如:当 count = 5 时,max = 总项数 * 每一项的高度 + 外边距 * (总项数 - 1),即 max = 5 * 50px + 20px * (5 - 1) = 330pxscrollbarRef.value!.setScrollTop(max)
}/*** 控制滚动条滚动到容器的顶部*/
function setScrollToTop() {scrollbarRef.value!.setScrollTop(0)
}/*** 当触发滚动事件时,返回滚动的距离*/
function handleScroll({ scrollTop }) {console.log('scrollTop', scrollTop)
}/*** 新增一项*/
async function add() {count.value++await setScrollToBottom()
}/*** 删除一项*/
async function onDelete() {if (count.value > 0) {count.value--}await setScrollToBottom()
}
.header {margin: 10px;
}
.scrollbar-demo-item {display: flex;align-items: center;justify-content: center;height: 50px;margin: 20px;text-align: center;border-radius: 4px;background: var(--el-color-primary-light-9);color: var(--el-color-primary);
}
相关文章:
【Element-plus】如何让滚动条永远在最底部(支持在线演示)
如何让滚动条永远在最底部 一、适用场景二、实现思路三、效果图四、在线演示五、完整代码 一、适用场景 在某些场景下,你可能希望滚动条保持在最底部,以确保用户始终看到最新的内容或信息。如:在实时聊天应用程序中,当新消息到达…...
解决方案-LBS用户位置Redis-GEO附近人/店铺
附近人 windows安装附近人列表功能mysqlredis GEO CNNVD-201511-230 未授权访问python 多线程 redis大端模式与小端模式IP地址的不同表现形式1.字符串表现形式2. 整数表现形式3.大小端模式下的IP地址 0x01 进入python正题Python的socket库1.socket.socket(family,type)2.socket…...
springboot+html实现简单注册登录
前端: register.html <!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>register</title><link rel"stylesheet" type"text/css" href"/css/style.css&…...
ESP32网络开发实例-Web控制8路继电器
Web控制8路继电器 文章目录 Web控制8路继电器1、继器器介绍2、软件准备3、硬件准备4、代码实现4.1 单路继电器控制灯泡4.2 Web控制8路继电器将继电器与 ESP32 一起使用是远程控制交流家用电器的好方法。 本文介绍如何使用 ESP32 控制继电器模块。 我们将了解继电器模块的工作原…...
Flutter ☞ 变量
在Flutter中,变量分为两种类型 弱类型强类型 弱类型 var 如果没有初始值,可以变成任何类型 var a; // var a ; // 一旦赋值,就确定类型,不能随意改动 a abc; a 123; a true; a {key: 123}; a [abc];print(a)Object 动…...
冲刺十五届蓝桥杯P0006平面切分
文章目录 题目思路代码总结 题目 平面切分 思路 这道题是一个思维题把,之前没有接触过平面几何的知识,做起来感觉还是比较难的,用到的set集合和自己创建一个类 首先我们知道,一根直线A是可以将平面切分成两块的,如…...
mac电脑文献管理 EndNote 21最新 for Mac
EndNote 21 Mac版不仅能够快速有效的的帮助用户管理自己的文献,而且还可以用来创建个人参考文献库,添加各种文本,图像,连接,表格等等内容! - 搜索数百个在线资源以获取参考和PDF - 只需点击一下即可查找参…...
vue使用pdf-dist实现pdf预览以及水印
vue使用pdf-dist实现pdf预览以及水印 一.使用pdf-dist插件将PDF文件转换为一张张canvas图片 npm install pdf-dist二.页面引入插件 const pdfJS require("pdfjs-dist"); pdfJS.GlobalWorkerOptions.workerSrc require("pdfjs-dist/build/pdf.worker.entry&…...
[Python进阶] 操纵键盘:Pynput
6.7 操纵键盘:Pynput 6.7.1 press、release 按下或释放某个按键。 from pynput.keyboard import Controller, Keykeyboard Controller() # 按下并释放f keyboard.press(f) keyboard.release(f) # 按下组合按键:alt tab keyboard.press(Key.alt) key…...
购药不烦恼:线上购药小程序的快捷方式
在这个数字化时代,线上购药小程序的快捷方式正在改变着我们购药的方式。本文将介绍如何通过使用Python和Flask框架创建一个简单的线上购药小程序的原型,为用户提供购药的便利和快捷体验。 安装和设置 首先,确保你已经安装了Python和Flask。…...
10.17课上(七段显示器,递归异或与电路)
异或的递归与数电实现 用二选一选择器实现异或函数 在异或当中,如果有一项为0,就可以把那一项消掉;如果有一项为1,就是把剩下的所有项运算完的结果取反 (由此在算法当中可以采用递归解决) 当w1为0时&…...
maven-plugin-shade 详解
一、介绍 [1] This plugin provides the capability to package the artifact in an uber-jar, including its dependencies and to shade - i.e. rename - the packages of some of the dependencies. maven-plugin-shade 插件提供了两个能力: 把整个项目…...
cocosCreator 之 3.x使用NodePool对象池和封装
版本: cocosCreator 3.4.0 语言: TypeScript 环境: Mac NodePool 在项目中频繁的使用instantiate和node.destory对性能有很大的耗费,比如飞机射击中的子弹使用和销毁。 因此官方提供了NodePool,它被作为管理节点对象…...
三、RestClient操作索引库与文档
文章目录 三、RestClient操作索引库与文档3.1 操作索引库3.2 操作文档结束语 三、RestClient操作索引库与文档 ES官方提供了各种不同语言的客户端,用来操作ES。这些客户端的本质就是组装DSL语句,通过http请求发送给ES。 官方文档地址: https://www.ela…...
Hadoop3教程(五):NameNode和SecondaryNameNode
文章目录 (59)NN和2NN的工作机制(60)FsImage镜像文件(61)Edits编辑日志(62)Checkpoint时间设置参考文献 (59)NN和2NN的工作机制 NameNode的数据是存储在磁盘…...
腾讯云我的世界mc服务器多少钱一年?
腾讯云我的世界mc服务器多少钱?95元一年2核2G3M轻量应用服务器、2核4G5M带宽优惠价218元一年、4核8G12M带宽轻量服务器446元一年,云服务器CVM标准型S5实例2核2G优惠价280元一年、2核4G配置服务器748元一年,腾讯云百科txybk.com分享腾讯云我的…...
modelsim实现二选一以及D触发器并仿真
#实验一 二选一 module two_1(in1,in2,cho,out); input[3:0] in1,in2; output[3:0] out; reg[3:0] out; input cho; always* begin if(cho0) outin1; else outin2; end endmodule module two1_test(); …...
直线导轨在喷涂行业中的应用场景
直线导轨因其具有精度高、速度快、刚性强、使用寿命长等特点被广泛应用在各行各种中,其中,在喷涂行业中的应用最为广泛,以下是直线导轨在喷涂行业中的应用场景: 1、平面喷涂:直线导轨可以应用在各种机械加工的平面&…...
纯css+js自制下拉框
前提 因为html的select标签,下拉框自定义程度非常的低,为了贴合而项目ui显示,所以打算自制下拉框 代码 html <div class"pos-rel"><div id"select" class"select get-select"><span class&…...
uniapp在App端如何动态修改原生导航栏?
uniapp在App端如何动态修改原生导航栏? 文章目录 uniapp在App端如何动态修改原生导航栏?page.json配置修改 buttons 文字修改按钮上的角标设置 searchInput的 focus设置 searchInput的 text 在App端可以通过得到 webview 对象,通过当前 webvi…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
day52 ResNet18 CBAM
在深度学习的旅程中,我们不断探索如何提升模型的性能。今天,我将分享我在 ResNet18 模型中插入 CBAM(Convolutional Block Attention Module)模块,并采用分阶段微调策略的实践过程。通过这个过程,我不仅提升…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
毫米波雷达基础理论(3D+4D)
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文: 一文入门汽车毫米波雷达基本原理 :https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...
WEB3全栈开发——面试专业技能点P4数据库
一、mysql2 原生驱动及其连接机制 概念介绍 mysql2 是 Node.js 环境中广泛使用的 MySQL 客户端库,基于 mysql 库改进而来,具有更好的性能、Promise 支持、流式查询、二进制数据处理能力等。 主要特点: 支持 Promise / async-await…...
精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑
精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑 在电子商务领域,转化率与网站性能是决定商业成败的核心指标。今天,我们将深入解析不同类型电商平台的转化率基准,探讨页面加载速度对用户行为的…...
