【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);
相关推荐
hh随便起个名3 小时前
力扣二叉树的三种遍历
javascript·数据结构·算法·leetcode
我是小路路呀4 小时前
element级联选择器:已选中一个二级节点,随后又点击了一个一级节点(仅浏览,未确认选择),此时下拉框失去焦点并关闭
javascript·vue.js·elementui
程序员爱钓鱼4 小时前
Node.js 编程实战:文件读写操作
前端·后端·node.js
PineappleCoder4 小时前
工程化必备!SVG 雪碧图的最佳实践:ID 引用 + 缓存友好,无需手动算坐标
前端·性能优化
JIngJaneIL5 小时前
基于springboot + vue古城景区管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
敲敲了个代码5 小时前
隐式类型转换:哈基米 == 猫 ? true :false
开发语言·前端·javascript·学习·面试·web
澄江静如练_5 小时前
列表渲染(v-for)
前端·javascript·vue.js
JustHappy5 小时前
「chrome extensions🛠️」我写了一个超级简单的浏览器插件Vue开发模板
前端·javascript·github
Loo国昌5 小时前
Vue 3 前端工程化:架构、核心原理与生产实践
前端·vue.js·架构