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

用el-scrollbar实现滚动条，拖动滚动条可以滚动，但是通过鼠标滑轮却无效

news 来源：原创 2025/8/2 10:41:51

问题：

用elementplus实现的滚动条的页面中，滑动滚动条可以滚动，但是通过鼠标滑轮却无效，鼠标没有问题。

解决：

在开发者工具中， 元素->时间监听器中发现当我移除网页中祖先元素的滚动事件，该组件的滚动事件就可以生效了。

得知：由于我监听了祖先元素的滚动事件做了一些处理，所有该元素的滚动事件冒泡到了祖先元素，而祖先元素页面高度不够不能滚动，所以页面看起来没有改变。

办法：

给这个组件添加滚动事件，阻止事件冒泡到主页，就可以解决问题了。

代码：

 

<template><div class="commonLableMain"><el-scrollbar max-height="280px"><div class="labels" @wheel="handleComponentScroll"><div v-for="(item) in 17" :key="item"><Label/></div></div></el-scrollbar></div>
</template><script setup>
import Label from './label'
const handleComponentScroll = (event)=>{event.stopPropagation(); // 阻止事件冒泡到主页}</script>

相关文章：

用el-scrollbar实现滚动条，拖动滚动条可以滚动，但是通过鼠标滑轮却无效

问题&#xff1a; 用elementplus实现的滚动条的页面中&#xff0c;滑动滚动条可以滚动&#xff0c;但是通过鼠标滑轮却无效&#xff0c;鼠标没有问题。 解决&#xff1a; 在开发者工具中&#xff0c; 元素->时间监听器中发现当我移除网页中祖先元素的滚动事件&#xff0c;该…...

编程日记 2025/8/2 10:41:51

windows下，用CMake编译qt项目，出现错误By not providing “FindQt5.cmake“...

开发环境&#xff1a;windows10 qt5.14&#xff0c; 编译器msvc2017x64&#xff0c;CMake3.30&#xff1b; 现象&#xff1a; CMakeList文件里&#xff0c;如有find_package(Qt5 COMPONENTS Widgets REQUIRED) target_link_libraries(dis_lib PRIVATE Qt5::Widgets) 用CMak…...

编程日记 2025/7/31 5:00:02

windows实现VNC连接ubuntu22.04服务器

最近弄了一个700块钱的mini主机&#xff0c;刷了ubuntu22.04系统&#xff0c;然后想要在笔记本上通过VNC连接&#xff0c;这样就有了一个linux的开发环境。最后实现的过程为&#xff1a; 安装vnc服务器 安装 VNC 服务器软件&#xff1a; sudo apt update sudo apt install t…...

编程日记 2025/7/31 20:21:57

SQL注入--联合注入--理论

什么是SQL注入&#xff1f; SQL注入&#xff08;SQL Injection&#xff09;是一种常见的Web安全漏洞。 形成的主要原因是web应用程序在接收相关数据参数时未做好过滤&#xff0c;将其直接带入到数据库中查询&#xff0c;导致攻击者可以拼接执行构造的SQL语句&#xff0c;从而获…...

编程日记 2025/8/1 19:36:54

LaTeX 利用注销 ccmap 宏包实现降重功能

在中文LaTeX中&#xff0c;ccmap 宏包的主要作用是支持复制和粘贴时正确处理中文字符的编码。它的功能对于生成的PDF文档尤其有用&#xff0c;使得PDF中的中文字符在被复制到其他地方时能够以正确的编码显示&#xff0c;而不是乱码或其他不正确的字符。 以下是ccmap的详细功能…...

编程日记 2025/8/1 1:39:10

NVR接入录像回放平台EasyCVR视频融合平台加油站监控应用场景与实际功能

在现代社会中&#xff0c;加油站作为重要的能源供应点&#xff0c;面临着安全监管与风险管理的双重挑战。为应对这些问题&#xff0c;安防监控平台EasyCVR推出了一套全面的加油站监控方案。该方案结合了智能分析网关V4的先进识别技术和EasyCVR视频监控平台的强大监控功能&#…...

编程日记 2025/7/29 1:41:57

经验笔记：远端仓库和本地仓库之间的连接(以Gitee为例)

经验笔记&#xff1a;远端仓库和本地仓库之间的连接 方法一&#xff1a;先创建远端仓库&#xff0c;再克隆到本地 创建远端仓库 登录到你的Git托管平台&#xff08;如Gitee、GitHub、GitLab、Bitbucket等&#xff09;。点击“New Repository”或类似按钮&#xff0c;创建一个新…...

编程日记 2025/8/1 22:35:09

趋势洞察｜AI 能否带动裸金属 K8s 强势崛起？

随着容器技术的不断成熟&#xff0c;不少企业在开展私有化容器平台建设时&#xff0c;首要考虑的问题就是容器的部署环境——是采用虚拟机还是物理机运行容器&#xff1f;在往期“虚拟化 vs. 裸金属*”系列文章中&#xff0c;我们分别对比了容器部署在虚拟化平台和物理机上的架…...

编程日记 2025/7/31 20:50:29

数据科学与SQL：组距分组分析 | 区间分布问题

目录 0 问题描述 1 数据准备 2 问题分析 3 小结 0 问题描述 绝对值分布分析也可以理解为组距分组分析。对于某个指标而言&#xff0c;一个记录对应的指标值的绝对值&#xff0c;肯定落在所有指标值的绝对值的最小值和最大值构成的区间内&#xff0c;根据一定的算法&#x…...

编程日记 2025/8/2 0:37:04

Cesium的ClearCommand的流程

ClearCommand是在每帧渲染前可以将显存的一些状态置为初始值&#xff0c;就如同把擦黑板。当然也包括在绘制过程中擦掉部分的数据&#xff0c;就如同画家在开始绘制的时候会画导览线&#xff08;如透视线&#xff09;&#xff0c;轮廓出来后这些导览线就会被擦除。 我画了一个…...

编程日记 2025/8/2 2:23:02

DBeaver错误：Public Key Retrieval is not allowed

问题原因 MySQL 8.0 默认使用 caching_sha2_password 认证插件&#xff0c;并要求客户端能够使用 RSA 公钥进行加密操作。如果客户端无法正确处理 RSA 公钥检索&#xff0c;就会触发这个错误。 解决方案 右键编辑连接-连接设置-属性驱动-修改allowPublicKeyRetrieval属性的值…...

编程日记 2025/7/28 11:58:56

slice介绍slice查看器

Android Jetpack架构组件(十)之Slices - 阅读清单 - 腾讯云开发者社区-腾讯云 slice 查看器apk 用adb intall 安装 Releases android/user-interface-samples GitHubMultiple samples showing the best practices in the user interface on Android. - Releases android/u…...

编程日记 2025/7/27 15:37:33

Vue移动端网页（H5）预览pdf文件（pdfh5和vue-pdf）（很详细）

我试了似乎不支持vue3 原文链接&#xff1a;Vue移动端网页&#xff08;H5&#xff09;预览pdf文件&#xff08;pdfh5和vue-pdf&#xff09;-阿里云开发者社区...

编程日记 2025/7/27 22:22:53

缓存工具类编写

缓存工具类编写 一般操作 在外面日常开发中&#xff0c;经常会有为了减少数据库压力&#xff0c;而将数据保存到缓存中并设置一个过期时间的操作。日常代码如下&#xff1a; Autowired private RedisTemplate<String, String> redisTemplate;public Object queryDataW…...

编程日记 2025/8/1 13:48:05

基于Java Springboot高校会议室预订管理系统

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据…...

编程日记 2025/7/31 22:06:39

redis-击穿、穿透、雪崩

击穿、穿透、雪崩经常听人说吧&#xff1f; 那他到底是啥呢&#xff1f;无非就是在有缓存层的情况下&#xff0c;对各种绕过缓存层从而直接落到了DB上的情况进行的分类。 概念性的东西大概如下&#xff0c;我是记不住&#xff0c;后期具体使用与规避这些问题才是大事&#xff…...

编程日记 2025/7/27 19:26:18

javascrip页面交互

元素的三大系列 offset系列 offset初相识 offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素&#xff0c;如果父级没有定位&#xff0c;则返回body element.offsetTop 返回元素相对于有定位父元素上方的偏移量 element.offsetLeft 返回元素…...

编程日记 2025/7/29 16:11:28

PAL（Program-Aided Language Model）

PAL&#xff08;Program-Aided Language Model&#xff09;是一种结合生成式语言模型&#xff08;如 GPT&#xff09;和程序执行能力的技术框架。它的核心思想是通过让语言模型生成代码或程序来解决复杂任务&#xff0c;程序执行的结果反过来增强语言模型的输出准确性和逻辑性。…...

编程日记 2025/7/29 20:35:17

Altium Designer学习笔记 6-10 异性元件库创建_原理图绘制

基于Altium Designer 23学习版&#xff0c;四层板智能小车PCB 更多AD学习笔记&#xff1a;Altium Designer学习笔记 1-5 工程创建_元件库创建 目录 6、光耦及二极管元件库模型创建 7、元件库模型的调用 二、原理图绘制及编译检查 8、元件的放置 9、器件的复制及对齐 10、…...

编程日记 2025/7/31 16:57:49

Qt-多元素控件

Qt中的多元素控件 Qt提供的多元素控件有&#xff1a; 这里的多元素控件都是两两一对的。 xxWidget和xxView的一个比较简单的理解就是&#xff1a; xxView是更底层的实现&#xff0c; xxWidget是基于xxView封装来的。 可以说&#xff0c;xxView使用起来比较麻烦&#xff0c;但…...

编程日记 2025/7/30 6:40:56

网络安全-web架构-nginx配置

1. nginx访问&#xff1a; 访问的是index.html&#xff0c; 访问ip访问的资源就是在/usr/share/nginx/html中&#xff1b; 当nginx不认识&#xff0c;浏览器认识的话&#xff0c;浏览器会自动渲染。 当nginx认识&#xff0c;浏览器不认识的话&#xff0c;浏览器会把它加载成…...

编程日记 2025/7/29 7:40:28

CPU性能优化--微操作

x86 架构处理器吧复杂的CISC指令转为简单的RISC微操作。这样做最大的优势是微操作可以乱序执行&#xff0c;一条简单的相加指令--比如ADD&#xff0c;EAX, EBX&#xff0c;只产生一个微操作&#xff0c;而很多复杂指令--比如ADD, EAX 可能会产生两个微操作&#xff0c;一个将数…...

编程日记 2025/8/1 1:25:13

开源许可协议

何同学推动了开源协议的认识&#xff0c;功不可没&#xff0c;第一次对开源有了清晰的认识&#xff0c;最宽松的MIT开源协议 源自OSC开源社区&#xff1a;何同学使用开源软件“翻车”&#xff0c;都别吵了&#xff01;扯什么违反MIT...

编程日记 2025/7/25 23:50:58

React核心功能详解（一）

React是一个流行的JavaScript库&#xff0c;用于构建用户界面。其高级核心功能涵盖了多个方面&#xff0c;以下是对这些功能的详解&#xff1a; 一、组件化与模块化 组件化开发&#xff1a;React提倡将用户界面拆分成多个独立的组件&#xff0c;每个组件负责管理自己的状态和…...

编程日记 2025/7/31 2:26:49

在vue中，根据后端接口返回的文件流实现word文件弹窗预览

需求 弹窗预览word文件&#xff0c;因浏览器无法直接根据blob路径直接预览word文件&#xff0c;所以需要利用插件实现。 解决方案 利用docx-preview实现word文件弹窗预览&#xff0c;以node版本16.21.3和docx-preview版本0.1.8为例 具体实现步骤 1、安装docx-preview插件 …...

编程日记 2025/7/27 10:28:32

基于Spring Boot的同城宠物照看系统的设计与实现

摘 要 科学技术日新月异&#xff0c;人们的生活都发生了翻天覆地的变化&#xff0c;同城宠物照看系统当然也不例外。过去的信息管理都使用传统的方式实行&#xff0c;既花费了时间&#xff0c;又浪费了精力。在信息如此发达的今天&#xff0c;我们可以通过网络这个媒介&#x…...

编程日记 2025/7/28 3:35:50

Python操作neo4j库py2neo使用之py2neo 删除及事务相关操作（三）

Python操作neo4j库py2neo使用之py2neo 删除及事务相关操作&#xff08;三&#xff09; py2neo 删除 1、连接数据库 from py2neo import Graph graph Graph("bolt://xx.xx.xx.xx:7687", auth(user, pwd), nameneo4j)2、删除节点 # 删除单个节点 node graph.node…...

编程日记 2025/7/30 8:51:48

二分基本实现

模板 一般题目看到&#xff0c;最大&#xff0c;最小时优先考虑二分 //将区间分为 [l,mid-1] int erfen1(int l,int r) {while(l<r){int mid(lr1)/2;if(check())lmid;elsermid-1;}return l; }//将区间分为 [mid1,r] int erfen2(int l,int r) {while(l<r){int mid(lr)/2…...

编程日记 2025/7/29 11:51:40

数据结构中的随机抽取和顺序存取

在数据结构领域&#xff0c;随机存取与顺序存取是两种基本的存储模式。这两种模式在很大程度上决定了数据的组织与访问方式&#xff0c;从而对数据处理效率和存储空间的利用效果产生重要影响。本文将进一步探讨这两种存储模式的特点及其差异。 随机存取 随机存取&#xff0c;…...

编程日记 2025/7/27 1:33:14

大数据新视界 -- 大数据大厂之 Impala 性能优化：跨数据中心环境下的挑战与对策（上）（27 / 30）

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...

编程日记 2025/8/1 12:59:02

GPT中转站技术架构

本文介绍阿波罗AI中转站&#xff08;https://api.ablai.top/&#xff09;的技术架构&#xff0c;该中转API的技术架构采用了分布式架构、智能调度和API中转等技术&#xff0c;确保了全球范围内的高效访问和稳定运行。以下是对该技术架构的详细分析&#xff1a; 分布式架构 分…...

编程日记 2025/7/28 11:41:25

忽然就卷起来的AI Coding 赛道

忽然就卷起来的AI Coding 赛道 原创 松子 松子聊数据 2024年11月22日 17:03 2023年&#xff0c;大模型的爆发让整个行业经历了一场“拼尽一切”的竞赛——拼算力、拼参数、拼语料&#xff0c;再到今天开始拼智能体。 每一步都是技术的跃迁&#xff0c;也让市场竞争愈发白热化…...

编程日记 2025/7/30 20:42:47

十大网络安全事件

一、私有云平台遭攻击&#xff0c;美国数千家公司工资难以发放 1月&#xff0c;专门提供劳动力与人力资本管理解决方案的美国克罗诺斯&#xff08;Kronos&#xff09;公司私有云平台遭勒索软件攻击&#xff0c;事件造成的混乱在数百万人中蔓延。 克罗诺斯母公司UKG集团&#xf…...

编程日记 2025/7/29 15:41:31

1+X应急响应（网络）病毒与木马的处置：

病毒与木马的处置&#xff1a; 病毒与木马的简介&#xff1a; 病毒和木马的排查与恢复&#xff1a;...

编程日记 2025/8/1 12:18:55

nohup java -jar supporterSys.jar --spring.profiles.active=prod

文章目录 1、ps -ef | grep java2、kill 13713、ps -ef | grep java4、nohup java -jar supporterSys.jar --spring.profiles.activeprod &5、ps -ef | grep java1. 启动方式进程 1371进程 19994 2. 主要区别3. 可能的原因4. 建议 1、ps -ef | grep java rootshipper:~# p…...

编程日记 2025/7/28 16:14:28

二进制 分析工具：Radare2、r2frida、Binutils、file、string、as、nm、ldd、objdump、readelf、strip

1、二进制 分析工具 工欲善其事&#xff0c;必先利其器&#xff0c;在二进制安全的学习中&#xff0c;​使用工具尤为重要。遇到一个不熟悉的文件时&#xff0c; 首先要确定 "这是什么类型的文件"&#xff0c;回答这个问题的首要原则是&#xff0c;绝不要根据文件的扩…...

编程日记 2025/8/1 10:53:20

【Linux】基本指令

一、基本指令 1、pwd 语法&#xff1a;pwd 功能&#xff1a;显示用户当前所在的目录。 2.ls 语法&#xff1a;ls [命令行选项][目录或文件](对于选项可以是0个或多个) 功能&#xff1a;对于目录&#xff0c;该命令该目录下的目录和文件。对于文件&#xff0c;将列出文件名…...

编程日记 2025/8/1 23:40:16

Failed to start Docker Application Container Engine

说明&#xff1a; 1&#xff09;访问应用业务&#xff0c;读取不到数据&#xff0c;show databases;查看数据库报错 2&#xff09;重启docker服务&#xff0c;服务启动失败&#xff0c;查看日志报错如下图所示 3&#xff09;报错信息&#xff1a;chmod /data/docker: read-only…...

编程日记 2025/7/30 8:24:42

043 商品详情

文章目录 详情页数据表结构voSkuItemVo.javaSkuItemSaleAttrVo.javaAttrValueAndSkuIdVo.javaSpuAttrGroupVo.javaGroupAttrParamVo.java pom.xmlSkuSaleAttrValueDao.xmlSkuSaleAttrValueDao.javaAttrGroupDao.xmlAttrGroupServiceImpl.javaSkuInfoServiceImpl.javaSkuSaleAtt…...

编程日记 2025/7/30 21:03:22

股指期货的套保策略如何精准选择和规避风险？

在金融市场中&#xff0c;股指期货作为一种重要的风险管理工具&#xff0c;常被投资者用来规避投资风险。其原理在于&#xff0c;股指期货与现货股指的走势高度相关&#xff0c;因此可以通过在期货市场上建立与现货头寸相反的头寸&#xff0c;来对冲掉现货市场的价格波动风险。…...

编程日记 2025/7/29 21:34:56

基于物联网设计的人工淡水湖养殖系统(华为云IOT)_253

文章目录 一、前言1.1 项目介绍【1】项目开发背景【2】设计实现的功能【3】项目硬件模块组成【4】设计意义【5】国内外研究现状【6】摘要1.2 设计思路1.3 系统功能总结1.4 开发工具的选择【1】设备端开发【2】上位机开发1.5 参考文献1.6 系统框架图1.7 系统原理图1.8 实物图1.9…...

编程日记 2025/7/31 14:46:33

【动手学深度学习Pytorch】4. 神经网络基础

模型构造 回顾一下感知机。 nn.Sequential()&#xff1a;定义了一种特殊的module。 torch.rand()&#xff1a;用于生成具有均匀分布的随机数&#xff0c;这些随机数的范围在[0, 1)之间。它接受一个形状参数&#xff08;shape&#xff09;&#xff0c;返回一个指定形状的张量&am…...

编程日记 2025/8/2 6:34:13

python高阶技巧一

闭包 简单认识一下闭包 以下代码&#xff0c;内层inner函数不仅依赖于自身的参数b&#xff0c;还依赖于外层outer函数的参数a。inner就是一个闭包函数&#xff0c;既能访问外部变量&#xff0c;又保证外部变量不是全局的&#xff0c;不会被篡改掉&#xff0c;确保了外部变量的…...

编程日记 2025/7/30 4:37:32

智慧环保生态文明信息化解决方案

1. 生态文明建设背景 随着国家对生态文明建设的重视&#xff0c;一系列政策文件相继出台&#xff0c;将生态文明建设纳入国家发展总体布局&#xff0c;加大资源消耗、环境保护等指标权重&#xff0c;推动生态文明体制改革。 2. 智慧环保的定义与发展 智慧环保作为数字环保的…...

编程日记 2025/8/2 10:34:32

【Linux】权限

&#x1f33b;个人主页&#xff1a;路飞雪吖~ &#x1f320;专栏&#xff1a;Linux 目录 ⭐Linux权限的概念 &#x1f31f;权限管理 <1>文件访问者的分类 <2>文件类型和访问权限 <3>文件权限值的表示方法 <4>文件访问权限的相关设置方法 ✨chmod…...

编程日记 2025/7/29 14:43:28

docker 部署 kvm 图形化管理工具 WebVirtMgr

镜像构建 官方最后一次更新已经是 2015年6月22日 了&#xff0c;官方也没有 docker 镜像&#xff0c;这边选择咱们自己构建如果你的服务器有魔法&#xff0c;可以直接 git clone 一下 webvirtmgr 的包&#xff0c;没有的话&#xff0c;可以和我一样&#xff0c;提前从 github 上…...

编程日记 2025/7/30 1:28:51

Next.js- 链接和导航

#题引&#xff1a;我认为跟着官方文档学习不会走歪路 在介绍路由导航之前先了解下客户端组件和服务端组件 服务端组件&#xff08;Server Components&#xff09; &#xff08;1&#xff09; 渲染方式&#xff1a; 在服务器上渲染&#xff0c;生成 HTML 后发送到客户端。适…...

编程日记 2025/8/1 0:57:20

主机管理工具 WGCLOUD v3.5.6 更新了哪些特性

WGCLOUD-v3.5.6 更新说明&#xff0c;2024-11-20发布 1. 新增&#xff0c;个性化采集&#xff0c;查看 2. 新增&#xff0c;支持达梦数据库做数据源来存贮监控数据&#xff0c;查看说明(8) 3. 新增&#xff0c;日志监控支持配置自动处理指令&#xff0c;当发现日志出现告警关键…...

编程日记 2025/8/1 12:08:28

空间数据存储格式GeoJSON

GeoJSON 是一种用于表示地理信息的开放标准格式&#xff0c;广泛用于存储和交换地理空间数据。它基于 JSON 格式&#xff0c;因此易于理解和处理&#xff0c;尤其适用于 Web 和 JavaScript 环境中的地图应用。GeoJSON 支持多种地理信息类型&#xff0c;如点、线、面、坐标系统等…...

编程日记 2025/8/1 15:57:27

【SQL Server】华中农业大学空间数据库实验报告 实验九 触发器

1.实验目的 通过实验课程与理论课的学习深入理解掌握的触发器的原理、创建、修改、删除、基本的使用方法、主要用途&#xff0c;并且可以在练习的基础上&#xff0c;熟练使用触发器来进行数据库的应用程序的设计&#xff1b;深入学习深刻理解与触发器相关的T-SQL语句的编写的基…...

编程日记 2025/7/27 15:25:08