scroll 和 wheel 事件的区别

16 篇文章 0 订阅
订阅专栏
文章讨论了在处理长列表滚动时遇到的问题,发现scroll事件在某些情况下可能不触发,因为滚动条件受限于Element。作者探讨了scroll和wheel事件的区别,指出wheel事件与鼠标滚轮相关,而scroll则与元素的可滚动性关联。
摘要由CSDN通过智能技术生成

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 只和鼠标有关

一文读懂鼠标滚轮事件wheelEvent)
weixin_33881041的博客
12-16 6325
最近在用VUE写一个后台管理系统,顶部标签页涉及鼠标滚轮事件,由于每个浏览器对滚轮事件的处理方式不一样,个人对这个又不懂,折腾了很久,参考了大神的代码,也把百度翻烂了,找到了一篇陈旧的博文(其实是主题很土,发布时间未知)。写得非常清楚,解决了我的问题。先看看我标签页的界面: 如果打开的标签超过滚动区域宽度,会显示滚动条,支持鼠标滚轮左右...
滚动事件scrollwheel区别
qq_41818857的博客
10-08 2284
scroll是页面滚动条滚动会触发的事件,而wheel是鼠标滚轮滚动会触发的事件。 一旦滚动条到底部后,滑动鼠标滚轮继续滚动,wheel就会一直触发,而scroll不会触发。
Vue框架学习笔记——事件scrollwheel区别
Aer_7z的博客
11-26 1786
描述scroll滚动条事件wheel鼠标滚轮事件,以及二者的不同
鼠标滚轮事件
九天翔龙的技术博客
09-14 1万+
前几天一个同学问我鼠标滚动事件。想做一个通过滚动鼠标的滚轮,来旋转导航。 查了点资料,完成了同学的问题。 不过,作为一个知识点,也记录下来,以加强印象。 鼠标滚轮事件,就是 wheel (滚轮)事件。 注:MDN(Molliza的开发者社区)不推荐使用传统的 onmousescroll 事件。作为技术强迫着患者,我也不建议用了,推荐使用 wheelwheel事件对象有 4 个属...
@Scoll和@Wheel区别
weixin_44712874的博客
03-18 565
@Scoll和@Wheel区别
浅谈wheel滚轮事件(兼容触摸板多次触发)
hclle的博客
05-14 4831
wheel 滚轮事件 一、事件说明 当滚动鼠标滚轮或操作其它类似输入设备时会触发滚轮事件 Tips: 使用触摸板触发该事件,由于系统的平滑处理,会触发多次该事件 IE 下无法使用触摸板触发该事件 替换了已被弃用的非标准 mousewheel 和 DOMMousewheel 事件。 二、兼容性 桌面端 浏览器 版本 Chrome 61 Edge 12 Firefox 17 IE 9 Opera 48 Safari 7 移动端 浏览器 版本
Disable Ctrl + Scroll Wheel Zoom-crx插件
04-04
语言:English 在Chrome中禁用Ctrl +滚轮缩放快捷键。 此扩展程序禁用了Chrome中的Ctrl +滚轮缩放快捷方式。 首次安装后,您可能需要重新加载标签页或重新启动Chrome。 请注意,它不适用于:-Chrome网上应用店中的...
javascript阻止scroll事件多次执行的思路及实现
10-26
总而言之,通过条件判断和延迟执行相结合的方式,可以有效地控制scroll事件的执行频率,从而提升用户交互体验和网页特效的性能。在实际开发中,开发者需要根据具体情况调整和优化这些方法,以达到最佳的用户体验。
disable-scroll-wheel-zoom:Chrome扩展程序禁用了Ctrl +滚轮缩放快捷方式
05-23
标题中的“disable-scroll-wheel-zoom:Chrome扩展程序禁用了Ctrl +滚轮缩放快捷方式”表明我们关注的是一个Chrome浏览器的扩展程序,它的主要功能是阻止用户使用Ctrl键加鼠标滚轮进行页面缩放操作。这个特性可能对于...
Tab Wheel Scroll-crx插件
04-03
另外,如果您一次停用了扩展程序并重新启用它,则必须重新加载所有选项卡以注册事件(重新启动chrome就可以了)。 适用的地方---------------它适用于加载了真实内容的每个页面,但内部“ chrome://”页面或“ ...
选项卡滚轮「Tab Wheel Scroll」-crx插件
03-21
另外,如果您一次停用了扩展程序并重新启用它,则必须重新加载所有选项卡以注册事件(重新启动chrome就可以了)。适用的地方---------------它适用于加载了真实内容的每个页面,但内部“ chrome://”页面或“ ...
笔记本触摸板滑动事件导致连滑的解决方式
weixin_33861800的博客
12-25 2269
Google了一下,发现并没有关于笔记本触摸板的事件。 在MDN的WheelEvent事件中是这样描述的: WheelEvent DOM事件会在用户滚动鼠标滚轮或操作其它类似鼠标的设备时触发。 也就是说笔记本触摸板的事件被解释为模拟鼠标滚轮的事件。 举个栗子,经常用到的双指上/下滑动会返回什么,可以copy下面代码到控制台试一下 windowAddMouseWheel(); function ...
java mousewheel事件_一文读懂鼠标滚轮事件wheelEvent)
weixin_42277672的博客
02-19 1739
最近在用VUE写一个后台管理系统,顶部标签页涉及鼠标滚轮事件,由于每个浏览器对滚轮事件的处理方式不一样,个人对这个又不懂,折腾了很久,参考了大神的代码,也把百度翻烂了,找到了一篇陈旧的博文(其实是主题很土,发布时间未知)。写得非常清楚,解决了我的问题。先看看我标签页的界面:如果打开的标签超过滚动区域宽度,会显示滚动条,支持鼠标滚轮左右滚动。这里涉及wheelEvent的2个属性:wheelDelt...
onWheel 和 onScroll 区别
独碟的博客
07-19 6000
onwheel 事件在鼠标滚轮在元素上下滚动时触发。同样可以在触摸板上滚动或放大缩小区域时触发(如笔记本上的触摸板)。 onscroll 事件在元素滚动条在滚动时触发。滚动条必须存在,否则不会触发。无论以那种方式,只要滚动条滚动,事件都会触发。触发方式:鼠标滚轮,鼠标拖动,键盘上下键,或者设置的滚动函数,如 scrollTo,scrollBy,scrollByLines, scrollByPag...
关于scroll和mousewheel事件的问题
qq_30975339的博客
12-26 5566
需要注意的点: 火狐的鼠标滚轮事件是DOMMouseScroll 事件参数兼容:e=window.event||e;(下面省略) preventDefault()函数取消的是默认事件,不会把我们自己添加的事件处理删除 实验开始 在下面验证例子的基础上实验,实验之间代码没有干涉: 1.原样输出: 在元素内无论是手动拉动滚动条还是滚动鼠标滚轮,'d'都是无法出现的。而当元素滚动到达顶部或...
onscroll事件和onwheel事件区别
weixin_33701294的博客
05-04 2163
为什么80%的码农都做不了架构师?>>> ...
鼠标滚轮滚动事件wheel
TXW6666的博客
05-31 5845
鼠标得滚动事件wheel 鼠标的滚轮事件主要有两种: onmousewheel(firefox不支持) DOMMouseScroll(只有firefox支持) wheel事件对象得属性: deltaY、detail、wheelDelta ,deltaMode detail deltaX,鼠标滚轮左右摆动,本属性是只读的。 负值,向左;正值,向右。(正负方向,跟系统的x坐标保持一致。) deltaY,鼠标滚轮上下滚动,只读。负值,向上;正值,向下。 deltaMode,属性返回一个数字,表示滚动值
NGUI -- Scroll View
热门推荐
游戏开发者
04-14 1万+
注意:本文翻译时NGUI版本已经更新到3.0.7 原文地址:http://www.tasharen.com/forum/index.php?topic=6729 概览 一个被裁剪的UIPanel是不完整的,除非它能像滚动视图那样被拖动是吧?没错! 只需要简短的三步,就能把panel转化为滚动视图: 首先,选择你想拥有滚动视图的Panel,然后在场景视图
stm32基于TouchGFX的GUI开发(五):(Scroll Wheel)滚轮容器的使用
u014627020的博客
03-18 1652
stm32基于TouchGFX的GUI开发(五):(Scroll Wheel)滚轮容器的使用 最终效果图: 文章目录stm32基于TouchGFX的GUI开发(五):(Scroll Wheel)滚轮容器的使用前言一、界面布局以及资源添加 1、创建自定义控件 2、创建主screen界面 3、Scroll Wheel关键参数设置二、功能实现 1、自定义控件设置文本 2、实现Scroll Wheel自带的更新虚函数3、主界面的构造函数中添加界面初始化代码总结 前言 本章我们将介绍List Layout控
module 'pywinauto.mouse' has no attribute 'scroll_wheel'
最新发布
04-17
根据您提供的信息,您遇到了一个错误。错误信息显示在模块 'pywinauto.mouse' 中没有 'scroll_wheel' 属性。这可能是因为您使用的版本不支持该属性,或者您的代码中存在其他问题。 要解决这个问题,您可以尝试以下几个步骤: 1. 确认您正在使用的是最新版本的 pywinauto 库。您可以通过升级库来获取最新的功能和修复的 bug。 2. 检查您的代码中是否存在拼写错误或其他语法错误。确保正确引用了 'pywinauto.mouse' 模块,并且正确使用了 'scroll_wheel' 属性。 3. 查阅 pywinauto 的官方文档或社区论坛,看看是否有其他用户遇到了类似的问题,并找到解决方案。 如果您需要更具体的帮助,请提供更多关于您的代码和环境的信息,以便我能够更好地帮助您解决问题。
写文章

热门文章

  • 类型 never 上不存在属性 16611
  • node-gyp 下载 node-headers 和 node.lib 不成功 8629
  • cannot be used as a JSX component 7936
  • .ini 文件是干什么的 3630
  • 能直接复制node_modules吗 2702

分类专栏

  • 跨平台OTT应用开发 3篇
  • 算法 27篇
  • SICP 2篇
  • 软件设计师 14篇
  • C# 4篇
  • Js/Ts 12篇
  • CSS/SASS/SCSS/Styled-Component 9篇
  • 浏览器工作原理&性能优化 13篇
  • React & Redux 18篇
  • React深入原理 5篇
  • git 3篇
  • npm 6篇
  • 一些问题和解决 16篇
  • 前端 7篇
  • 其他 19篇

最新评论

  • node-gyp 下载 node-headers 和 node.lib 不成功

    ChangYan.: 好的,感谢!我试试

  • node-gyp 下载 node-headers 和 node.lib 不成功

    阿凡达哒哒哒: 博主,我没太看懂node.lib是怎么放的?是放到headers的解压文件中?还是在node的版本文件?

  • node-gyp 下载 node-headers 和 node.lib 不成功

    阿凡达哒哒哒: 但是node.lib和SHASUMS256.txt 还是下载不到

  • node-gyp 下载 node-headers 和 node.lib 不成功

    阿凡达哒哒哒: headers下载不到的问题解决了,解决方法和博主不一样,我是这样配置的,还是在.npmrc文件加下面配置 tarball=E:/soft/node-v20.8.1-headers.tar.gz 你看你的headers地址在哪里替换下。

  • node-gyp 下载 node-headers 和 node.lib 不成功

    ChangYan.: 请问解决了吗?我也是用的yarn

最新文章

  • 【Stream】流媒体从入门到入土 (1)
  • 【算法】dfs转dp的通用方式
  • Android TV上OTT PWA应用开发的播放器选择:video.js vs exoplayer
2024年15篇
2023年69篇
2022年77篇
2019年3篇

目录

目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值

玻璃钢生产厂家重庆城市几何玻璃钢雕塑福建室内商场美陈销售玻璃钢不锈钢雕塑图片东阳人物玻璃钢雕塑厂家优质玻璃钢雕塑哪家好玻璃钢雕塑版权厦门商场美陈创意长春玻璃钢雕塑定制商场美陈布置推送公众号专业玻璃钢雕塑优选企业巴彦淖尔商场美陈肖家河商场美陈滑县玻璃钢雕塑价格玻璃钢雕塑实施方案高跟鞋玻璃钢雕塑黑龙江抽象玻璃钢雕塑张掖玻璃钢动物雕塑设计商场购物街区主题街区的美陈广东玻璃钢造型雕塑公司玻璃钢花盆怎样兰州玻璃钢雕塑厂玻璃钢雕塑设计哪家便宜江西步行街玻璃钢雕塑批发江苏艺术商场美陈多少钱模压法玻璃钢雕塑生产浏阳玻璃钢雕塑雨花玻璃钢卡通雕塑惠州玻璃钢雕塑凳子商场室外圣诞树美陈江西佛像玻璃钢雕塑定制香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声单亲妈妈陷入热恋 14岁儿子报警汪小菲曝离婚始末遭遇山火的松茸之乡雅江山火三名扑火人员牺牲系谣言何赛飞追着代拍打萧美琴窜访捷克 外交部回应卫健委通报少年有偿捐血浆16次猝死手机成瘾是影响睡眠质量重要因素高校汽车撞人致3死16伤 司机系学生315晚会后胖东来又人满为患了小米汽车超级工厂正式揭幕中国拥有亿元资产的家庭达13.3万户周杰伦一审败诉网易男孩8年未见母亲被告知被遗忘许家印被限制高消费饲养员用铁锨驱打大熊猫被辞退男子被猫抓伤后确诊“猫抓病”特朗普无法缴纳4.54亿美元罚金倪萍分享减重40斤方法联合利华开始重组张家界的山上“长”满了韩国人?张立群任西安交通大学校长杨倩无缘巴黎奥运“重生之我在北大当嫡校长”黑马情侣提车了专访95后高颜值猪保姆考生莫言也上北大硕士复试名单了网友洛杉矶偶遇贾玲专家建议不必谈骨泥色变沉迷短剧的人就像掉进了杀猪盘奥巴马现身唐宁街 黑色着装引猜测七年后宇文玥被薅头发捞上岸事业单位女子向同事水杯投不明物质凯特王妃现身!外出购物视频曝光河南驻马店通报西平中学跳楼事件王树国卸任西安交大校长 师生送别恒大被罚41.75亿到底怎么缴男子被流浪猫绊倒 投喂者赔24万房客欠租失踪 房东直发愁西双版纳热带植物园回应蜉蝣大爆发钱人豪晒法院裁定实锤抄袭外国人感慨凌晨的中国很安全胖东来员工每周单休无小长假白宫:哈马斯三号人物被杀测试车高速逃费 小米:已补缴老人退休金被冒领16年 金额超20万

玻璃钢生产厂家 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化