Vue框架学习笔记——事件scroll和wheel的区别
文章目录
- 前文提要
- 滚动条滚动事件 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二者不同点 前文提要 本人仅做个人学习记录，如有错误，请多包涵 滚动条滚动事件 scroll scroll事件绑定html页面中的指定滚动条，无论你拖拽滚动条，选中滚动条之后按键盘…...
【LeetCode】每日一题 2023_11_29 无限集中的最小数字（哈希/堆）
文章目录 刷题前唠嗑题目：无限集中的最小数字题目描述代码与解题思路偷看大佬题解 结语 刷题前唠嗑 LeetCode？启动！！！ 今天的题目也比较的简单，因为数据量不大，所以什么做法都能过的去 题目&a…...
C/C++ 常用的四种查找算法
在计算机科学中，搜索算法是一种用于在数据集合中查找特定元素的算法。C语言作为一种强大的编程语言，提供了多种搜索算法的实现方式。本文将介绍C语言中的四种常见搜索算法其中包括（线性查找，二分法查找，树结构查找&…...
Linux | Ubuntu设置 netstat(网络状态)
netstat命令用于显示与IP、TCP、UDP和ICMP协议相关的统计数据，一般用于检验本机各端口的网络连接情况。netstat是在内核中访问网络及相关信息的程序，它能提供TCP连接，TCP和UDP监听，进程内存管理的相关报告。 1.netstat的安装 搜…...
成为AI产品经理——模型构建流程（下）
目录 1.模型训练 2.模型验证 3.模型融合 4.模型部署 上节课我们讲了模型设计、特征工程，这节课我们来讲模型构建剩下的三个部分：模型训练、模型验证和模型融合。 1.模型训练 模型训练就是要不断地训练、验证、调优直至让模型达到最优。 那么怎么达…...
TCP Socket API 讲解，以及回显服务器客户端的实现
文章目录 TCPServerSocket APISocket API TCP 客户端服务器的实现 TCP ServerSocket API ServerSocket 是创建TCP服务端 Socket 的 API。 serverSocket构造方法： 方法签名方法说明ServerSocket(int port)创建一个服务端流套接字Socket，并绑定到指定端…...
2023年掌控安全学院CTF暖冬杯——数据流分析
前言：打工仔一枚，第一波上新的3题misc 做完了 再打ISCTF随便记录一下 PS：环境关了，题目描述忘记了，反正就是找flag。 筛选HTTP数据流 导出数据流慢慢看 ctrl F 搜flag 看到一条 有flag.txt 的数据 导出另存.zip 这里…...
UE4 基础篇十四：自定义插件
文末有视频地址和git地址 一、概念 虚幻里插件都是用C++写的，C++包括.h文件和.cpp文件，.h头文件通常包含函数类型和函数声明，cpp文件包含这些类型和函数的实现， 你为项目编写的所有代码文件都必须位于模块中，模块就是硬盘里的一个文件夹，包含名为“Build.cs”的C#文件…...
QT QGraphicsItem 图元覆盖导致鼠标点击事件不能传递到被覆盖图元
一、概述 在日常开发中，遇到这样一个问题，线图元和引脚图元重叠，导致点击引脚图元，没有进入引脚图元的鼠标点击事件中。 二、产生原因 如果您的 QGraphicsItem 上有一个图元覆盖了它，可能会导致鼠标事件无法正常触发…...
proto语法学习笔记
proto语法学习笔记 Protocol Buffers（Proto是由谷歌开发的一种数据序列化格式。 Proto 不是一种编程语言，而是一种接口描述语言（IDL），用于定义数据结构和消息格式。 它的设计目标是提供一种简单、高效、可扩展的方法来…...
python-nmap库使用教程（Nmap网络扫描器的Python接口）（功能：主机发现、端口扫描、操作系统识别等）
文章目录 Python-nmap库使用教程前置条件引入python-nmap创建Nmap扫描实例执行简单的主机发现（nmap -sn）示例，我有一台主机配置为不响应 ICMP 请求，但使用nmap -sn，仍然能够探测到设备： 端口扫描扫描特定端…...
什么是智慧工地？
一、什么是智慧工地？ 工地本身不拥有智慧，工地的运作是依赖于人的智慧。工地信息化技术，能够减少对人的依赖，使工地拥有智慧。 智慧工地，就是立足于“智慧城市”和“互联网”，采用云计算、大数据和物联网等…...
【古月居《ros入门21讲》学习笔记】08_发布者Publisher的编程实现
目录 说明： 1. 话题模型 图示 说明 2. 实现过程（C） 创建功能包 创建发布者代码（C） 配置发布者代码编译规则 编译并运行 编译 运行 3. 实现过程（Python） 创建发布者代码（…...
沿着马可·波罗的足迹，看数字云南
刚入行的时候，有位前辈跟我说过一句话：去现场“要像外国人一样去看”，重新审视那些自己可能早已“熟视无睹”的事物。 前不久，我跟随“看见数字云南——云南数字经济媒体探营活动”，奔赴昆明、大理、西双版纳等地&…...
记录问题-使用@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…...
three.js--立方体
作者：baekpcyyy🐟 使用three.js渲染出可以调节大小的立方体 1.搭建开发环境 1.首先新建文件夹用vsc打开项目终端 2.执行npm init -y 创建配置文件夹 3.执行npm i three0.152 安装three.js依赖 4.执行npm I vite -D 安装 Vite 作为开发依赖 5.根…...
App的测试，和传统软件测试有哪些区别？应该增加哪些方面的测试用例？
从上图可知，测试人员所测项目占比中，App测试占比是最高的。 这就意味着学习期间，我们要花最多的精力去学App的各类测试。也意味着我们找工作前，就得知道，App的测试点是什么，App功能我们得会测试࿰…...
改进LiteOS中物理内存分配算法（详细实验步骤+相关源码解读）
一、实验要求 优化TLSF算法，将Best-fit策略优化为Good-fit策略，进一步降低时间复杂度至O(1)。 优化思路： 1.初始化时预先为每个索引中的内存块挂上若干空闲块，在实际分配时避免分割（split）操作ÿ…...
洛谷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 亲戚 并查集模板题目 两个人如果使亲戚就合并建立联系，最后进行查找即可 #incl…...
2. OpenHarmony源码下载
OpenHarmony源码下载(windows, ubuntu) 现在的 OpenHarmony 4.0 源码已经有了，在 https://gitee.com/openharmony 地址中，描述了源码获取的方式。下来先写下 windows 的获取方式，再写 ubuntu 的获取方式。 获取源码前，还需要的准…...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
无法与IP建立连接，未能下载VSCode服务器
如题，在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈，发现是VSCode版本自动更新惹的祸！！！ 在VSCode的帮助->关于这里发现前几天VSCode自动更新了，我的版本号变成了1.100.3 才导致了远程连接出…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。 今天是六一儿童节，小蓝老师为了让大家在节…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解，“超级…...
新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及，充电桩作为核心配套设施，其安全性与可靠性备受关注。然而，在高温、高负荷运行环境下，充电桩的散热问题与消防安全隐患日益凸显，成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
LLM基础1_语言模型如何处理文本
基于GitHub项目：https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken：OpenAI开发的专业"分词器" torch：Facebook开发的强力计算引擎，相当于超级计算器 理解词嵌入：给词语画"…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现（两者等价），用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例： 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
C++.OpenGL （14/64）多光源（Multiple Lights）
多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
Redis：现代应用开发的高效内存数据存储利器
一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发，其初衷是为了满足他自己的一个项目需求，即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源，Redis凭借其简单易用、…...