【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);
相关推荐
liuyao_xianhui3 分钟前
优选算法_模拟_替换所有的‘?‘_C++
开发语言·javascript·数据结构·c++·算法·链表·动态规划
摸鱼仙人~15 分钟前
Vue Todo 实战练习教程(简略版)
前端·javascript·vue.js
dzj88816 分钟前
云朵字生成器-html
前端·css·html·云朵字
FlyWIHTSKY21 分钟前
Vue 3 单文件组件加载顺序详解
前端·javascript·vue.js
周万宁.FoBJ22 分钟前
vue源码讲解之 reactive解析(仅proxy部分)
开发语言·javascript·ecmascript
乔磊24 分钟前
我开发了一个 Ralph CLI
javascript
霪霖笙箫28 分钟前
真授之以渔:我是怎么从"想给文章配几张图",一步步做出一个可发布 skill 的
前端·人工智能·开源
yzin31 分钟前
【源码】【react】useCallback、useMemo、memo 原理
前端·react.js
CHU72903531 分钟前
扭蛋机盲盒小程序前端功能设计及核心玩法介绍
前端·小程序
进击的尘埃32 分钟前
Module Federation 2.0 共享策略翻车实录:版本协商、热更新与依赖冲突的排查工具链
javascript