scroll 和 wheel 事件的区别

news2024/11/16 19:57:00

listRef.addEventListener(“scroll”, onScroll),onScroll 里面打 log 打不出来。
我觉得 list 是一个长的列表,比 container 要长,应该能滚动才是,不知道为啥滚动不了

当时我想到的是可能电视不支持这个事件,但是问了同事,说是支持的
后来请教了师父,他直接 在pc浏览器上测试,window.addEventListener(“scroll”, () => {console.log(“test”)]); 发现不是每个页面都能打出来的

所以存在一种可能,就是这个列表本身不符合滚动的条件

既然不能从元素下手,那就应该从鼠标下手,也就是用 wheel

鼠标的事件常用的有click,这个是点击,mousemove,位移,还有 wheel,就是滚轮了
click 其实也是包含 mousedown 点下去 mouseup 弹起来

在这里插入图片描述
这是 mdn 上写的 wheel 和 scroll 事件的区别,说 wheel 未必触发 scroll 事件,这个其实也间接的说明这俩本身就不是一个东西

在这里插入图片描述
这个则是 scroll 事件的定义,可以清楚的看到 Element,只有 element 可以 scroll,才能在 element been scrolled 的时候,触发 scroll 事件。scroll 和 element 有关,wheel 只和鼠标有关

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/906829.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OSCS开源安全周报第 56 期:Apache Airflow Spark Provider 任意文件读取漏洞

本周安全态势综述 OSCS 社区共收录安全漏洞 3 个,公开漏洞值得关注的是 Apache NiFi 连接 URL 验证绕过漏洞(CVE-2023-40037)、PowerJob 未授权访问漏洞(CVE-2023-36106)、Apache Airflow Spark Provider 任意文件读取漏洞(CVE-2023-40272)。 针对 NPM 、PyPI 仓库…

饼图的legend文字太长和数量太多处理

legend文字太长和数量太多 在我们使用图表饼图的时候会发现因为数据太多导致页面的布局发现重叠或者不好看,比如label的文字太长了,legend的数量太多了等一些问题,所以今天我们就来聊聊遇到这些问题的是可以通过那些设置来进行改进 文字太长…

第12步---MySQL的JDBC操作

第12步---MySQL的JDBC操作 1.概述 采用Java API 的方式实现数据之间的操作。 根据不同的数据库采用了不同的驱动,接口是一致的。 下载的地址 MySQL :: Download MySQL Connector/J (Archived Versions) 2.执行流程 注册驱动 创建连接 执行sql语句的对象 结果…

10个最受欢迎的免费STL模型下载网站【2023】

推荐:用 NSDT编辑器 快速搭建可编程3D场景 你是否决定立即购买 3D 打印机? 或者可能一直在考虑并正在寻找更多细节来了解它如何使您受益? 好吧,总有一天,你拥有 3D 打印活动所需的所有知识和资源,但没有时…

【SpringCloud】SpringCloudAlibaba官网资料

出现原因 Spring Cloud Netflix Projects Entering Maintenance Mode 官网 博客 https://github.com/alibaba/spring-cloud-alibaba/blob/master/README-zh.md官网 https://spring.io/projects/spring-cloud-alibaba#overview英文 https://github.com/alibaba/spring-cloud-…

refresh大揽

注意在每一步大操作之前都有一个前期准备 prepareRefresh() 设置spring启动的时间 设置spring关闭和开启的标志位 获取环境对象,并设置一些属性值,是系统环境的不是xml设置的 设置监听器,以及需要发布事件的集合。 Con…

Java算法_ BST 中第 k 个最小元素 (LeetCode_Hot100)

题目描述:给定一个二叉搜索树的根节点 ,和一个整数 ,请你设计一个算法查找其中第 个最小元素(从 1 开始计数)。 获得更多?算法思路:代码文档,算法解析的私得。 运行效果 完整代码 /*** 2 * Aut…

实验三 HBase1.2.6安装及配置

系列文章目录 文章目录 系列文章目录前言一、HBase1.2.6的安装二、HBase1.2.6的配置2.1 单机模式配置2.2 伪分布式模式配置 总结参考 前言 在安装HBase1.2.6之前,需要安装好hadoop2.7.6。 本篇文章参考:HBase2.2.2安装和编程实践指南 一、HBase1.2.6的安…

双频RTK定位技术原理及解决方案

双频RTK定位技术 双频RTK(Real-Time Kinematic)定位技术是一种利用卫星导航系统进行高精度实时定位的方法,它通过同时使用两个不同频率的载波信号来测量载波相位差,从而提高定位精度和抗干扰能力。以下是双频RTK定位技术的原理和解…

一篇文章教你使用Docker本地化部署Chatgpt(非api,速度非常快!!!)及裸连GPT的方式(告别镜像GPT)

本地搭建ChatGPT(非api调用) 第一种方法:使用Docker本地化部署第一步,下载安装Docker登录GPT 第二种方法:不部署项目,直接连接 第一种方法:使用Docker本地化部署 这种方法的好处就是没有登录限…

dolphinscheduler的僵尸任务清理和清理一直在运行的任务状态

dolphinscheduler的僵尸任务清理 界面操作不了的 只能去数据库更改状态或则删除掉 原因:海豚调度中有几百条僵尸任务, 界面怎么也删不掉,想从数据库中删除,开始查找从数据库删除的办法。 参考以下脚本,结合我库中僵尸…

在浏览器中打包 TypeScript 系列1:ES 模块和导入映射Import map

原文地址 这是“在浏览器中打包 TypeScript 系列”的第 1 部分。 第 2 部分:在浏览器中打包 TypeScript JS打包简史 让我们绕个小弯,看看在使用 ES 模块之前是如何使用 JS 的。 (年份为近似值) 1. 黑暗时代(2010年…

SPSS--如何使用分层分析以及分层分析案例分享

分层分析:将资料按某个或某些需要控制的变量的不同分类进行分层,然后再估计暴露因子与某结局变量之间关系的一种资料分析方法。 分层分析的最重要的用途是评估和控制混杂因子所致的混杂偏倚。通过按混杂因子分层,可使每层内的两个比较组在所控…

七夕福利来袭:多种表白代码/语录超级赠送,不信你没女朋友

前言 马上七夕了~又是牛郎织女相会的一天! 不管什么时候, 这都是一个特别的日子, 在这个充满幸福的日子里, 我要把最美好的祝福, 送给心里有我的每一个人; 祝愿大家: 一生平安&#xff0c…

兼具传统和新锐基因的极氪,是怎么做用户运营的?|新能源车专题研究

主笔:浣芳黛 出品:增长黑盒研究组 近几个月来,新能源车势头强劲,众多车企纷纷传出连月增长和再创新高的捷报,在当下整体经济复苏缓慢的映衬下,显得格外耀眼。 于是,增长黑盒近期针对新能源车企展…

Ganache的安装与设置连接

文章目录 前言1. 安装Ganache2. 安装cpolar3. 创建公网地址4. 公网访问连接5. 固定公网地址 前言 Ganache 是DApp的测试网络,提供图形化界面,log日志等;智能合约部署时需要连接测试网络。 Ganache 是一个运行在本地测试的网络,通过结合cpol…

docker 06(docker compose)

一、服务编排 二、docker compose

【Mybatis源码分析】解析语句标签_Select|Update|Insert|Delete

解析语句标签 Select|Update|Insert|Delete 一、前言二、语句标签的源码分析三、sql 标签的解析四、总结 一、前言 在阐述解析语句标签之前,得先知道我们的语句标签内容最后被封装到Configuration哪?(都应该知道 Mybatis 通过的是 XMLConfig…

骨传导耳机是如何让我们听到声音的?为什么要选择骨传导耳机?

骨传导耳机的工作原理就是通过人的颅骨、骨迷路、螺旋器、听觉中枢来传递声波,不需要接触到人的外耳道和内耳膜,省去了许多声波传递的步骤,相对于入耳式耳机会更加的保护耳朵。 说简单一点,平时我们自己挠头发或者通过上次碰撞牙…

交换机生成树STP

生成树协议(spanning-tree-protocol,stp):在具有物理环路的交换机网络上生成没有回路的逻辑网络的方法,生成树协议使用生成树算法,在一个具有冗余路径的容错网络中计算出一个无环路的路径,使一部分端口处于…