【VUE】JS监听鼠标上下滚动事件

zlting~

于 2023-07-06 11:32:44 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js 开发语言

本文链接：https://blog.youkuaiyun.com/sunshineTing2/article/details/131571432

文章介绍了在Vue应用中如何监听页面及div元素的鼠标滚动事件。通过`mounted`生命周期钩子添加事件监听器，使用`DOMMouseScroll`和`onmousewheel`处理不同浏览器的兼容性，`scrollFunc`方法处理滚轮向上和向下的事件，通过`wheelDelta`（IE/Opera/Chrome）或`detail`（Firefox）来判断滚动方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【VUE】JS鼠标滚动监听事件

一、给页面绑定滑轮滚动事件

mounted() {
	//给页面绑定滑轮滚动事件
	if(document.addEventListener){
	    document.addEventListener('DOMMouseScroll',this.scrollFunc,false);
	} //W3C
	//滚动滑轮触发scrollFunc方法
	window.onmousewheel = document.onmousewheel = this.scrollFunc; //IE/Opera/Chrome
}

method() {
	/** 鼠标滚轮事件 向上触发放大，向下 缩小*/
    scrollFunc(e){
      e = e || window.event;
      if(e.wheelDelta){ //IE/Opera/Chrome
      	console.log(e.wheelDelta); // +120表示向上；-120表示向下
      } else if (e.detail) {  //Firefox滑轮事件
         console.log(e.detail); // +3表示向上；-3表示向下
      }
    },
}

二、给div绑定滑轮滚动事件

<div id="divBox">指定的DIV范围</div>

var div = document.getElementById('divBox');
//给div绑定滑轮滚动事件
if(div.addEventListener){
 	div.addEventListener('DOMMouseScroll',this.scrollFunc,false);
} //W3C
//滚动滑轮触发scrollFunc方法
div.onmousewheel = div.onmousewheel = this.scrollFunc; //IE/Opera/Chrome