【js监听鼠标滚轮】

功能

监听鼠标滚轮运动方向

代码

javascript 复制代码
var mouseListener = function() {//监听鼠标滚轮向上或者向下运动
				var event = event || window.event;
				var delta = event.wheelDelta ? event.wheelDelta : (-event.detail) * 40;
				if (delta == 150) console.log('up');
				if (delta == -150) console.log('down');
				
			}
			//注册事件监听
			document.addEventListener('mousewheel', mouseListener);
			//FireFox支持一个名为DOMMouseScroll的类似事件,类比于mousewheel。
			document.addEventListener('DOMMouseScroll', mouseListener);

扩展函数

javascript 复制代码
var mouseListener = function(fUp,fDown) {//监听鼠标滚轮向上或者向下运动
				var event = event || window.event;
				var delta = event.wheelDelta ? event.wheelDelta : (-event.detail) * 40;
				if (delta == 150){
					console.log('up');
					if(fUp instanceof Function) fUp();//触发鼠标滚轮向上运动的函数
				} 
				if (delta == -150){
					console.log('down');
					if(fDown instanceof Function) fDown();//触发鼠标滚轮向下运动的函数
				} 
				
			}
			//注册事件监听
			document.addEventListener('mousewheel', mouseListener);
			document.addEventListener('DOMMouseScroll', mouseListener);
相关推荐
前端市界1 小时前
当20个并发请求拖垮你的应用:从TCP握手到HTTP/2的终极排错指南
前端
量子-Alex1 小时前
【大模型与智能体论文】REACT:协同语言模型中的推理与行动
前端·react.js·语言模型
冷崖1 小时前
QML-动画
前端
太过平凡的小蚂蚁1 小时前
适配器模式:让不兼容的接口协同工作
java·前端·javascript
涔溪1 小时前
在 Electron 框架中实现数据库的连接、读取和写入
javascript·数据库·electron
锈儿海老师1 小时前
超越平台:Vercel 的野心是定义编程语言的未来吗?
前端·javascript·架构
泷羽Sec-静安3 小时前
Less-7 GET-Dump into outfile-String
android·前端·网络·sql·安全·web安全
深入理解GEE云计算3 小时前
遥感生态指数(RSEI):理论发展、方法论争与实践进展
javascript·人工智能·算法·机器学习
IT_陈寒3 小时前
从2秒到200ms:我是如何用JavaScript优化页面加载速度的🚀
前端·人工智能·后端
天天向上10243 小时前
vue 网站导航栏
前端·javascript·vue.js