【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…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中,拉取视频流只要求udp方式,从2016开始要求新增支持tcp被动和tcp主动两种方式,udp理论上会丢包的,所以实际使用过程可能会出现画面花屏的情况,而tcp肯定不丢包,起码…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成:MAC头部frame bodyFCS,其中MAC是固定格式的,frame body是可变长度。 MAC头部有frame control,duration,address1,address2,addre…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验,我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育,这并非炒作,而是已经发生的巨大变革。教育机构和教育者不能忽视它,试图简单地禁止学生使…...
解读《网络安全法》最新修订,把握网络安全新趋势
《网络安全法》自2017年施行以来,在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂,网络攻击、数据泄露等事件频发,现行法律已难以完全适应新的风险挑战。 2025年3月28日,国家网信办会同相关部门起草了《网络安全…...
libfmt: 现代C++的格式化工具库介绍与酷炫功能
libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库,提供了高效、安全的文本格式化功能,是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全:…...
