【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);
相关推荐
aiguangyuan42 分钟前
React 18 源码解读(一)
javascript·react·前端开发
LFly_ice1 小时前
学习React-23-React-router
前端·学习·react.js
haofafa1 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
我叫张小白。1 小时前
TypeScript对象类型与接口:构建复杂数据结构
前端·javascript·typescript
O***p6041 小时前
JavaScript增强现实开发
开发语言·javascript·ar
墨客希1 小时前
如何快速掌握大型Vue项目
前端·javascript·vue.js
大福ya1 小时前
AI开源项目改造NextChat(ChatGPT-Next-Web)实现前端SSR改造打造一个初始框架
前端·chatgpt·前端框架·开源·aigc·reactjs·ai编程
samroom1 小时前
langchain+ollama+Next.js实现AI对话聊天框
javascript·人工智能·langchain
n***33352 小时前
SpringBoot返回文件让前端下载的几种方式
前端·spring boot·后端
纯粹的热爱2 小时前
🌐 阿里云 Linux 服务器 Let's Encrypt 免费 SSL 证书完整部署指南
前端