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

【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