【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);
相关推荐
鹿鹿鹿鹿isNotDefined7 小时前
Pixelium Design:Vue3 的像素风 UI 组件库
前端·javascript·vue.js
运维行者7 小时前
知乎崩了?立即把网站监控起来!
前端·javascript·后端
stayong7 小时前
市面主流跨端开发框架对比
前端
一米八二的矮个子7 小时前
JavaScript语法进阶(一)
javascript
庞囧8 小时前
大白话讲 React 原理:Scheduler 任务调度器
前端
liyi_hz20088 小时前
O2OA (翱途)开发平台新版本发布预告:架构升级、性能跃迁、功能全面进化
android·java·javascript·开源软件
东华帝君8 小时前
react 虚拟滚动列表的实现 —— 动态高度
前端
CptW8 小时前
手撕 Promise 一文搞定
前端·面试
温宇飞8 小时前
Web 异步编程
前端
腹黑天蝎座8 小时前
浅谈React19的破坏性更新
前端·react.js