当前位置: 首页 > news >正文

在vue3 中,使用element-plus中的el-scrollbar,让内容元素自动滚动


在vue3 中,使用element-plus中的el-scrollbar,在el-scrollbar中如果元素过大出现滑动,就自动滑动,到底部时就返回顶部重新向下滑动,鼠标放入框内停止滑动

模板部分:

<template><el-scrollbar ref="scrollArea" class="scroll-container" @mouseenter="stopScroll" @mouseleave="startScroll"><div class="scroll-content"><!-- 这里放入你想滚动的内容 --></div></el-scrollbar>
</template>

脚本部分:

import { ref, onMounted, onUnmounted } from 'vue';
import { ElScrollbar } from 'element-plus';export default {components: {ElScrollbar},setup() {const scrollArea = ref(null);let timer = null;const SCROLL_SPEED = 1; // 每次滚动的像素数,可以根据需要调整const startScroll = () => {if (timer) {clearInterval(timer);}timer = setInterval(() => {// 获取滚动容器const container = scrollArea.value.$el.querySelector('.el-scrollbar__wrap');// 判断是否已滚动到底部if (container.scrollHeight - (container.scrollTop + container.clientHeight) <= 0) {// 滚动到顶部container.scrollTop = 0;} else {// 向下滚动container.scrollTop += SCROLL_SPEED;}}, 30); // 根据需要调整滚动间隔};const stopScroll = () => {if (timer) {clearInterval(timer);}};onMounted(() => {startScroll();});onUnmounted(() => {stopScroll();});return {scrollArea,startScroll,stopScroll};}
};

样式部分:

.scroll-container {width: 100%;height: 300px; /* 你可以根据需要调整高度 */
}.scroll-content {/* 根据内容进行相应样式调整 */
}

相关文章:

在vue3 中,使用element-plus中的el-scrollbar,让内容元素自动滚动

​ 在vue3 中&#xff0c;使用element-plus中的el-scrollbar&#xff0c;在el-scrollbar中如果元素过大出现滑动&#xff0c;就自动滑动&#xff0c;到底部时就返回顶部重新向下滑动&#xff0c;鼠标放入框内停止滑动 模板部分&#xff1a; <template><el-scrollbar…...

Redis——Redis.conf详解+Redis持久化(RDB和AOF)+Redis订阅发布

配置文件 redis启动时通过配置文件启动 原生配置文件全文在网上随便搜索一下就能找到了。 单位 配置文件 unit单位 对大小写不敏感 包含 类比import&#xff0c;将其他的配置文件引入 网络 bind 127.0.0.1 // 绑定ip protected-mode yes //是否受保护 po…...

16.1.2 Linux 的多用户多任务环境

在 Linux 下面执行一个指令时&#xff0c;系统会将相关的权限、属性、程序码与数据等均载入内存&#xff0c; 并给予这个单元一个程序识别码 &#xff08;PID&#xff09;&#xff0c;最终该指令可以进行的任务则与这个 PID 的权限有关。根据这个说明&#xff0c;我们就可以简单…...

【11】Redis学习笔记 (微软windows版本)【Redis】

注意:官redis方不支持windows版本 只支持linux 此笔记是依托微软开发windows版本学习 一、前言 Redis简介&#xff1a; Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的内存数据结构存储系统&#xff0c;它也被称为数据结构服务器。Redis以键值对&am…...

数据结构刷题训练:用栈实现队列(力扣OJ)

目录 前言 1. 题目&#xff1a;用栈实现队列 2. 思路 3. 分析 3.1 定义 “ 队列 ” 3.2 创建队列 3.3 入队 3.4 队头数据 3.5 出队 3.6 判空和销毁 4.题解 总结 前言 栈和队列是数据结构中的两个重要概念&#xff0c;它们在算法和程序设计中都有着广泛的应用。本文将带你深入了…...

数字化车间mes生产执行管理系统

数字化车间mes是一款基于B/S结构的生产执行管理系统&#xff0c;主要目的是为中小企业提供了高效率、低成本、通用性强的一个MES系统解决方案&#xff0c;能够实时监控当前完成进度。 功能简介&#xff1a; 生产管理 大屏展示&#xff1a;可以从大屏展示页面看到任工序…...

SpringBoot + Mybatis多数据源

一、配置文件 spring: # datasource: # username: root # password: 123456 # url: jdbc:mysql://127.0.0.1:3306/jun01?characterEncodingutf-8&serverTimezoneUTC # driver-class-name: com.mysql.cj.jdbc.Driverdatasource:# 数据源1onedata:jdbc-url: j…...

ad+硬件每日学习十个知识点(35)23.8.15 (接口电路:RS232、RS485、RS422,单线协议UART->TTL)

文章目录 1.RS232的物理层2.RS232的三种连线方式3.DB9和RJ45&#xff08;网口&#xff09;线定义4.RS232的电路设计(tx端需要上拉)5.RS232芯片MAX3221的引脚功能6.什么是压摆率&#xff1f;&#xff08;压摆率越大越好&#xff09;7.为什么有了RS232之后&#xff0c;还需要RS48…...

sql类型-用户定义表类型

一、创建用户定义表类型String_Table_Type CREATE TYPE String_Table_Type AS TABLE ( Id nvarchar(200) NOT NULL ) GO DECLARE test String_Table_Type INSERT INTO test VALUES(a),(b),(c) SELECT * FROM test 二、SqlSugar中使用...

小程序 vant 项目记录总结 使用 scss 分享 订阅消息 wxs 分包 echarts图表 canvas getCurrentPages页面栈

小程序 vant vant 下载 npm init -ynpm i vant/weapp -S --production修改 app.json 将 app.json 中的 “style”: “v2” 去除 修改 project.config.json {..."setting": {..."packNpmManually": true,"packNpmRelationList": [{"p…...

关于Power Query中一些忽略的细节

Power Query中一些忽略的细节 重新认识Power Query查询的引用----提高数据加载效率透视逆透视----一对“好朋友”神奇的拼接----实现很多意想不到的操作 重新认识Power Query 关于它的定义&#xff0c;这里不再赘述&#xff0c;主要说一些新的理解。 Power Query 可以理解就是一…...

QML与C++交互

目录 1 QML获取C的变量值 2 QML获取C创建的自定义对象 3 QML发送信号绑定C端的槽 4 C端发送信号绑定qml端槽 5 C调用QML端函数 1 QML获取C的变量值 QQmlApplicationEngine engine; 全局对象 上下文属性 QQmlApplicationEngine engine; QQmlContext *context1 engine.…...

Microsoft ISA服务器配置及日志分析

Microsoft ISA 分析器工具&#xff0c;可分析 Microsoft ISA 服务器&#xff08;或 Forefront 威胁管理网关服务器&#xff09;的日志并生成安全和流量报告。支持来自 Microsoft ISA 服务器组件的以下日志&#xff1a; 数据包过滤器ISA 服务器防火墙服务ISA 服务器网络代理服务…...

Openlayers 实战 - 地图视野(View)- 图层 -(layer)- 资源(source)显示等级设置。

Openlayers 实战 - 地图视野&#xff08;View&#xff09;- 图层 -&#xff08;layer&#xff09;- 资源&#xff08;source&#xff09;显示等级设置。 问题原因核心代码完整代码&#xff1a;在线示例 在以往的项目维护中&#xff0c;出现一个问题&#xff0c;使用最新高清底图…...

Linux:shell脚本 正则表达式与AWK

一、正则表达式 由一类特殊字符及文本字符所编写的模式&#xff0c;其中有些字符&#xff08;元字符&#xff09;不表示字符字面意义&#xff0c;而表示控制或通配的功能&#xff0c;类似于增强版的通配符功能&#xff0c;但与通配符不同&#xff0c;通配符功能是用来处理文件…...

Android UI自动化测试框架—SoloPi简介

1、UI自动化测试简介 软件测试简介 ​软件测试是伴随着软件开发一同诞生的&#xff0c;随着软件规模大型化&#xff0c;结构复杂化&#xff0c;软件测试也从最初的简单“调试”&#xff0c;发展到当今的自动化测试。 ​ 自动化测试是什么呢&#xff1f;自动化测试是把以人为…...

Android Studio Giraffe 正式版下载地址

Android Studio 是 Android 的官方 IDE。它专为 Android 而打造&#xff0c;可以加快您的开发速度&#xff0c;帮助您为每款 Android 设备构建最高品质的应用。 比以往更快地编码和迭代 Android Studio 基于 IntelliJ IDEA 而构建&#xff0c;可以提供较短的编码和运行工作流…...

【C语言】调试技巧

目录 一、什么是bug? 二、调试 1.一般调试的步骤 2.Debug 和 Release 三、调试环境准备 四、调试时要查看的信息 1.查看临时变量的值 2.查看内存信息 3.查看调用堆栈 4.查看反汇编信息 5.查看寄存器 五、练习 六、常见的coding技巧 七、const的作用 八、编程常见…...

MySQL SUBSTRING_INDEX() 函数的详细介绍

MySQL SUBSTRING_INDEX() 从给定字符串中返回指定数量的分隔符出现之前的子字符串。 当指定数字为正数时从最终分隔符的左侧返回子字符串&#xff0c;当指定数字为负数时从最终分隔符的右侧返回子字符串。 如果指定的次数大于分隔符的出现次数&#xff0c;则返回的子字符串将…...

开源数据库Mysql_DBA运维实战 (DML/DQL语句)

DML/DQL DML INSERT 实现数据的 插入 实例&#xff1a; DELETE 实现数据的 删除 实例&#xff1a; UPDATE 实现数据的 更新 实例1&#xff1a; 实例2&#xff1a; 实例3&#xff1a; DQL DML/DQL DML语句 数据库操纵语言&#xff1a; 插入数据INSERT、删除数据DELE…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...