【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);
相关推荐
xiaotao1314 小时前
第九章:Vite API 参考手册
前端·vite·前端打包
午安~婉4 小时前
Electron桌面应用聊天(续)
前端·javascript·electron
彧翎Pro4 小时前
基于 RO1 noetic 配置 robosense Helios 32(速腾) & xsense mti 300
前端·jvm
小码哥_常5 小时前
解锁系统设置新姿势:Activity嵌入全解析
前端
之歆5 小时前
前端存储方案对比:Cookie-Session-LocalStorage-IndexedDB
前端
哟哟耶耶5 小时前
vue3-单文件组件css功能(:deep,:slotted,:global,useCssModule,v-bind)
前端·javascript·css
是罐装可乐5 小时前
深入理解“句柄(Handle)“:从浏览器安全到文件系统访问
前端·javascript·安全
华科易迅5 小时前
Vue如何集成封装Axios
前端·javascript·vue.js
康一夏5 小时前
Next.js 13变化有多大?
前端·react·nextjs
糖炒栗子03265 小时前
前端项目标准环境搭建与启动
前端