【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);
相关推荐
江城开朗的豌豆7 分钟前
JavaScript篇:自定义事件:让你的代码学会'打小报告'
前端·javascript·面试
ai产品老杨1 小时前
减少交通拥堵、提高效率、改善交通安全的智慧交通开源了。
前端·vue.js·算法·ecmascript·音视频
lexiangqicheng1 小时前
JS-- for...in和for...of
开发语言·前端·javascript
smallluan1 小时前
JS设计模式(4):观察者模式
javascript·观察者模式·设计模式
粥里有勺糖1 小时前
视野修炼-技术周刊第122期 | 发光图片制作
前端·javascript·github
y102121041 小时前
Python训练营打卡Day42
开发语言·javascript·ecmascript
Carlos_sam2 小时前
OpenLayers:封装Tooltip
前端·javascript
工呈士2 小时前
MobX与响应式编程实践
前端·react.js·面试
嘉小华2 小时前
Android Lifecycle 使用
前端
Sherry0072 小时前
实时数据传输协议:WebSocket vs MQTT
前端·websocket