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

Vue框架学习笔记——事件scroll和wheel的区别

news 2026/5/25 7:33:40

文章目录

  • 前文提要
  • 滚动条滚动事件 scroll
  • 鼠标滚动事件 wheel
  • 二者不同点

前文提要

本人仅做个人学习记录，如有错误，请多包涵

滚动条滚动事件 scroll

scroll事件绑定html页面中的指定滚动条，无论你拖拽滚动条，选中滚动条之后按键盘上下、pg up或pg dn、还是滚动鼠标滚轮，都能触发这个事件。
html示例代码如下：

<body><div id="box"><ul @scrool="f" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el: '#box',methods: {f(){console.log('触发了')}}})</script>
</body>

css代码如下：

<style>.list{height:500px;width:200px;overflow: auto;background-color: orange;}li{height:200px;width:180px;background-color: white;}
</style>

参考链接：overflow
当内容溢出的时候，overflow: auto;会提供滚动条

在这里插入图片描述
和开头描述的一样，只要滚动条向指定方向还有移动的空间，无论什么方式使得滚动条滚动，都能触发scroll事件，从而使得控制台输出’触发了’。

鼠标滚动事件 wheel

wheel事件绑定的是鼠标滚轮，而不是html页面内容中的滚动条
将上文html中的部分代码修改，其余不变：

<ul @wheel="f" class="list"><li>1</li><li>2</li><li>3</li><li>4</li>
</ul>

将绑定的事件从滚动条滚动换位鼠标滚轮滚动。
呈现效果如下：
在这里插入图片描述
当使用鼠标滚轮上下滑动的时候，会鼠标滚轮事件触发，从而在控制台输出’触发了’。

二者不同点

但是和scroll事件不同的是，当滚动条朝指定方向无法滚动，但是你使用鼠标滚轮朝着指定方向接着滚动，纵然滚动条不变化，控制台依旧会输出，也就是鼠标滚轮事件依旧被触发了。

例如，图中，当滚动条向上无法接着滚动，使用鼠标滚轮向上滚动，依旧触发鼠标滚轮事件，在控制台输出’触发了’

但是上文提到的scroll事件则不会像这样被触发。

至此，结束。

如果你觉得这篇文章写的不错，多多点赞~收藏吧！

相关文章：

Vue框架学习笔记——事件scroll和wheel的区别

文章目录 前文提要滚动条滚动事件 scroll鼠标滚动事件 wheel二者不同点 前文提要 本人仅做个人学习记录&#xff0c;如有错误&#xff0c;请多包涵 滚动条滚动事件 scroll scroll事件绑定html页面中的指定滚动条&#xff0c;无论你拖拽滚动条&#xff0c;选中滚动条之后按键盘…...

编程日记 2023/11/30 16:39:23

【LeetCode】每日一题 2023_11_29 无限集中的最小数字（哈希/堆）

文章目录 刷题前唠嗑题目&#xff1a;无限集中的最小数字题目描述代码与解题思路偷看大佬题解 结语 刷题前唠嗑 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01; 今天的题目也比较的简单&#xff0c;因为数据量不大&#xff0c;所以什么做法都能过的去 题目&a…...

编程日记 2023/11/30 16:38:22

C/C++ 常用的四种查找算法

在计算机科学中&#xff0c;搜索算法是一种用于在数据集合中查找特定元素的算法。C语言作为一种强大的编程语言&#xff0c;提供了多种搜索算法的实现方式。本文将介绍C语言中的四种常见搜索算法其中包括&#xff08;线性查找&#xff0c;二分法查找&#xff0c;树结构查找&…...

编程日记 2023/11/30 16:37:21

Linux | Ubuntu设置 netstat(网络状态)

netstat命令用于显示与IP、TCP、UDP和ICMP协议相关的统计数据&#xff0c;一般用于检验本机各端口的网络连接情况。netstat是在内核中访问网络及相关信息的程序&#xff0c;它能提供TCP连接&#xff0c;TCP和UDP监听&#xff0c;进程内存管理的相关报告。 1.netstat的安装 搜…...

编程日记 2023/11/30 16:35:19

成为AI产品经理——模型构建流程（下）

目录 1.模型训练 2.模型验证 3.模型融合 4.模型部署 上节课我们讲了模型设计、特征工程&#xff0c;这节课我们来讲模型构建剩下的三个部分&#xff1a;模型训练、模型验证和模型融合。 1.模型训练 模型训练就是要不断地训练、验证、调优直至让模型达到最优。 那么怎么达…...

编程日记 2023/11/30 16:34:18

TCP Socket API 讲解，以及回显服务器客户端的实现

文章目录 TCPServerSocket APISocket API TCP 客户端服务器的实现 TCP ServerSocket API ServerSocket 是创建TCP服务端 Socket 的 API。 serverSocket构造方法&#xff1a; 方法签名方法说明ServerSocket(int port)创建一个服务端流套接字Socket&#xff0c;并绑定到指定端…...

编程日记 2023/11/30 16:33:17

2023年掌控安全学院CTF暖冬杯——数据流分析

前言&#xff1a;打工仔一枚&#xff0c;第一波上新的3题misc 做完了 再打ISCTF随便记录一下 PS&#xff1a;环境关了&#xff0c;题目描述忘记了&#xff0c;反正就是找flag。 筛选HTTP数据流 导出数据流慢慢看 ctrl F 搜flag 看到一条 有flag.txt 的数据 导出另存.zip 这里…...

编程日记 2023/11/30 16:32:15

UE4 基础篇十四：自定义插件

文末有视频地址和git地址 一、概念 虚幻里插件都是用C++写的，C++包括.h文件和.cpp文件，.h头文件通常包含函数类型和函数声明，cpp文件包含这些类型和函数的实现， 你为项目编写的所有代码文件都必须位于模块中，模块就是硬盘里的一个文件夹，包含名为“Build.cs”的C#文件…...

编程日记 2023/11/30 16:31:13

QT QGraphicsItem 图元覆盖导致鼠标点击事件不能传递到被覆盖图元

一、概述 在日常开发中&#xff0c;遇到这样一个问题&#xff0c;线图元和引脚图元重叠&#xff0c;导致点击引脚图元&#xff0c;没有进入引脚图元的鼠标点击事件中。 二、产生原因 如果您的 QGraphicsItem 上有一个图元覆盖了它&#xff0c;可能会导致鼠标事件无法正常触发…...

编程日记 2023/11/30 16:30:12

proto语法学习笔记

proto语法学习笔记 Protocol Buffers&#xff08;Proto是由谷歌开发的一种数据序列化格式。 Proto 不是一种编程语言&#xff0c;而是一种接口描述语言&#xff08;IDL&#xff09;&#xff0c;用于定义数据结构和消息格式。 它的设计目标是提供一种简单、高效、可扩展的方法来…...

编程日记 2023/11/30 16:29:11

python-nmap库使用教程（Nmap网络扫描器的Python接口）（功能：主机发现、端口扫描、操作系统识别等）

文章目录 Python-nmap库使用教程前置条件引入python-nmap创建Nmap扫描实例执行简单的主机发现&#xff08;nmap -sn&#xff09;示例&#xff0c;我有一台主机配置为不响应 ICMP 请求&#xff0c;但使用nmap -sn&#xff0c;仍然能够探测到设备&#xff1a; 端口扫描扫描特定端…...

编程日记 2023/11/30 16:28:10

什么是智慧工地？

一、什么是智慧工地&#xff1f; 工地本身不拥有智慧&#xff0c;工地的运作是依赖于人的智慧。工地信息化技术&#xff0c;能够减少对人的依赖&#xff0c;使工地拥有智慧。 智慧工地&#xff0c;就是立足于“智慧城市”和“互联网”&#xff0c;采用云计算、大数据和物联网等…...

编程日记 2023/11/30 16:27:09

【古月居《ros入门21讲》学习笔记】08_发布者Publisher的编程实现

目录 说明&#xff1a; 1. 话题模型 图示 说明 2. 实现过程&#xff08;C&#xff09; 创建功能包 创建发布者代码&#xff08;C&#xff09; 配置发布者代码编译规则 编译并运行 编译 运行 3. 实现过程&#xff08;Python&#xff09; 创建发布者代码&#xff08;…...

编程日记 2023/11/30 16:26:08

沿着马可·波罗的足迹，看数字云南

刚入行的时候&#xff0c;有位前辈跟我说过一句话&#xff1a;去现场“要像外国人一样去看”&#xff0c;重新审视那些自己可能早已“熟视无睹”的事物。 前不久&#xff0c;我跟随“看见数字云南——云南数字经济媒体探营活动”&#xff0c;奔赴昆明、大理、西双版纳等地&…...

编程日记 2023/11/30 16:25:07

记录问题-使用@Validated报错Validation failed for argument [0]

类字段 NotNull(message "双坐标不能为空", groups {Insert.class, Update.class})private Integer yAxisType;接口 /*** 添加** return*/RequestMapping(value "/add", method RequestMethod.POST)public Result add(Validated(Insert.class) Request…...

编程日记 2023/11/30 16:23:04

three.js--立方体

作者&#xff1a;baekpcyyy&#x1f41f; 使用three.js渲染出可以调节大小的立方体 1.搭建开发环境 1.首先新建文件夹用vsc打开项目终端 2.执行npm init -y 创建配置文件夹 3.执行npm i three0.152 安装three.js依赖 4.执行npm I vite -D 安装 Vite 作为开发依赖 5.根…...

编程日记 2023/11/30 16:20:01

App的测试，和传统软件测试有哪些区别？应该增加哪些方面的测试用例？

从上图可知&#xff0c;测试人员所测项目占比中&#xff0c;App测试占比是最高的。 这就意味着学习期间&#xff0c;我们要花最多的精力去学App的各类测试。也意味着我们找工作前&#xff0c;就得知道&#xff0c;App的测试点是什么&#xff0c;App功能我们得会测试&#xff0…...

编程日记 2023/11/30 16:19:00

改进LiteOS中物理内存分配算法（详细实验步骤+相关源码解读）

一、实验要求 优化TLSF算法&#xff0c;将Best-fit策略优化为Good-fit策略&#xff0c;进一步降低时间复杂度至O(1)。 优化思路&#xff1a; 1.初始化时预先为每个索引中的内存块挂上若干空闲块&#xff0c;在实际分配时避免分割&#xff08;split&#xff09;操作&#xff…...

编程日记 2023/11/30 16:17:59

洛谷100题DAY8

36.P1416 攻击火星 此题找出规律即可 #include<bits/stdc.h> using namespace std; int n; int main() {cin >> n;cout << max(0, n - 2);return 0; } 37.P1551 亲戚 并查集模板题目 两个人如果使亲戚就合并建立联系&#xff0c;最后进行查找即可 #incl…...

编程日记 2023/11/30 16:16:58

2. OpenHarmony源码下载

OpenHarmony源码下载(windows, ubuntu) 现在的 OpenHarmony 4.0 源码已经有了&#xff0c;在 https://gitee.com/openharmony 地址中&#xff0c;描述了源码获取的方式。下来先写下 windows 的获取方式&#xff0c;再写 ubuntu 的获取方式。 获取源码前&#xff0c;还需要的准…...

编程日记 2023/11/30 16:15:57

终极AI编舞师：5分钟让音乐自动生成3D舞蹈的完整指南

终极AI编舞师&#xff1a;5分钟让音乐自动生成3D舞蹈的完整指南 【免费下载链接】mint Multi-modal Content Creation Model Training Infrastructure including the FACT model (AI Choreographer) implementation. 项目地址: https://gitcode.com/gh_mirrors/mint20/mint …...

编程新知 2026/5/25 6:30:42

保姆级教程：用阿里云镜像加速Unity Android依赖下载，搞定MAX+Admob集成

深度优化Unity安卓依赖下载&#xff1a;阿里云镜像加速MAX与AdMob集成实战国内Unity开发者在集成海外广告SDK时&#xff0c;最头疼的莫过于Gradle依赖下载缓慢甚至失败的问题。本文将手把手教你如何通过阿里云镜像仓库彻底解决这一痛点&#xff0c;同时串联Gradle版本管理、mai…...

编程新知 2026/5/25 5:53:39

机器学习势能面构建实战：从量子化学数据到高精度分子模拟

1. 项目概述&#xff1a;当机器学习“学会”了化学反应的势能面在计算化学的世界里&#xff0c;我们一直面临着一个核心矛盾&#xff1a;精度与效率的权衡。如果你想精确地描述一个化学反应&#xff0c;比如DNA复制过程中碱基对的质子转移&#xff0c;你需要动用量子化学方法&a…...

编程新知 2026/5/25 5:36:15

国密滑块登录实战：SM2+SM4密码链路全解析

1. 这不是“加个密”那么简单&#xff1a;滑块登录里藏着的国密链路真相你有没有试过&#xff0c;在某个政务类App或银行类Web端拖动滑块完成登录后&#xff0c;页面瞬间跳转&#xff0c;但控制台Network面板里却找不到任何明文密码字段&#xff1f;甚至抓包发现&#xff0c;提…...

编程新知 2026/5/25 5:28:33

3D激光SLAM入门：点云曲率计算与LOAM边缘/平面特征提取（附代码）

专栏系列&#xff1a;3D激光SLAM从零到精通 | 难度&#xff1a;中级 | 预计阅读&#xff1a;25分钟 前置知识&#xff1a;Python编程&#xff0c;numpy基础&#xff0c;3D点云的基本概念 摘要 本文深入讲解3D激光SLAM中最基础也是最关键的一环——点云特征提取。我们将从LOAM论…...

编程新知 2026/5/25 5:06:31

CVPR 2019 RKD论文复现踩坑记：从理论公式到可运行的PyTorch代码全解析

CVPR 2019 RKD论文复现实战&#xff1a;从数学推导到工业级PyTorch实现的关键细节当我在实验室第一次尝试复现CVPR 2019的Relational Knowledge Distillation&#xff08;RKD&#xff09;算法时&#xff0c;原以为按照论文公式直接编码就能快速跑通实验。但实际动手后才发现&am…...

编程新知 2026/5/25 4:58:29

iOS HTTPS抓包全链路指南：从Charles配置到SSL Pinning绕过

1. 为什么iOS HTTPS抓包比安卓难得多&#xff1f;——从SSL Pinning到系统证书信任链的硬门槛很多人第一次在Mac上打开Charles&#xff0c;连上iPhone&#xff0c;点开App发现一片空白&#xff1a;没有请求、没有响应、全是unknown。不是Charles坏了&#xff0c;也不是手机没连…...

编程新知 2026/5/25 4:12:30

UE Mobility

UE4传统光照模式最求极致性能&#xff1a;静态光源 静态物体&#xff1b;平衡画质与性能&#xff1a;固定光源 静态物体&#xff08;经典组合&#xff0c;如太阳&#xff09;&#xff1b;完全动态场景&#xff1a;可移动光源 Lumen&#xff1b;静态光源静态物体&#xff1a;…...

编程新知 2026/5/25 1:32:45

[开源] 病历自举报系统：面向临床质控的电子病历智能预审工具，用大模型扮演质疑者角色发现逻辑矛盾与缺项问题

本项目是一个专为中文电子病历&#xff08;EMR&#xff09;设计的轻量级质控辅助工具&#xff0c;核心目标是让医生在提交病历前&#xff0c;就能快速识别出文本中潜藏的逻辑矛盾、信息缺项、时间线错乱、数值异常和主观夸大等典型质量问题。我们不替代人工质控&#xff0c;也不…...

编程新知 2026/5/25 0:14:07

Kubernetes可观测性体系构建：全面监控与故障排查指南

Kubernetes可观测性体系构建&#xff1a;全面监控与故障排查指南 一、可观测性概述 可观测性&#xff08;Observability&#xff09; 是指通过系统产生的数据来理解系统内部状态的能力。在Kubernetes中&#xff0c;可观测性体系包含三个核心维度&#xff1a;指标&#xff08;…...

编程新知 2026/5/24 23:06:54