【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);
相关推荐
by__csdn15 分钟前
Node.js版本与npm版本的对应关系
前端·npm·node.js
AI_567836 分钟前
Webpack性能优化终极指南:4步实现闪电打包
前端·webpack·性能优化
xuehuayu.cn1 小时前
js es6 class 类中的值是异步赋值, 子类中如何获取这个值?
javascript·es6
威风的虫1 小时前
ES6 数组方法:告别循环,拥抱函数式编程
开发语言·前端·javascript
小杨快跑~1 小时前
ES6 Promise:告别回调地狱的异步编程革命
前端·javascript·ecmascript·es6
linweidong1 小时前
VIVO前端面试题及参考答案
前端·跨域·localstorage·重绘·浏览器兼容·git管理·前端重构
有意义1 小时前
从零搭建:json-server+Bootstrap+OpenAI 全栈 AI 小项目
前端·后端·llm
温宇飞1 小时前
CCState:为大型 Web 应用设计的状态管理库
前端
r0ad2 小时前
读诗的时候我却使用了自己研发的Chrome元素截图插件
前端·javascript·chrome
IT_陈寒2 小时前
React性能优化实战:这5个Hooks技巧让我的应用快了40%
前端·人工智能·后端