如何检查鼠标是向上滚动还是向下滚动

How to check if mouse scroll top or bottom direction?

本文关键字：滚动 鼠标 何检查 检查      更新时间：2023-09-26

我正在尝试获取鼠标方向功能。我想知道如何检查鼠标是向上滚动还是向下滚动。

每次检查机身是否向上或向下滚动：

if(scroll top... ) {
    do something.....
}
if(scroll bottom... ) {
    do something.....
}

CSS：

body { 
    height:1400px; 
    margin:0; 
    padding:0; 
    position:relative; 
}
.get-direction-info-here {
    width:150px; 
    height:30px; 
    background:red; 
    display:block; 
    font-size:14px; 
    line-height:30px; 
    color:#fff; 
    position:fixed; 
    top:0;
}

HTML:

<div class="get-direction-info-here">
    Scroll direction: <!-- Scroll TOP --> / <!--Scroll Bottom-->
</div>
<div class="direction-info"> </div>

您可以使用HTML5中的鼠标滚轮事件来检测鼠标滚轮动作。上/下由增量是正（向上滚动）还是负（向下滚动）来确定。

     window.onload = function() {
    	var directionInfo = document.getElementById("directionInfo");
    	
    	if (directionInfo.addEventListener) {
    		directionInfo.addEventListener("mousewheel", MouseWheelHandler, false);
    		directionInfo.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
    	}
    	else directionInfo.attachEvent("onmousewheel", MouseWheelHandler);
    	
    	function MouseWheelHandler(e) {
    
    		// cross-browser wheel delta
    		var e = window.event || e;
    		var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    		if(delta > 0)
              directionInfo.innerText = 'Up';
            else
              directionInfo.innerText = 'Down';
    		return false;
    	}
    
    }
.direction-info {
  width:100px;
  height:100px;
  border:1px solid green;
  }
<div id="directionInfo" class="direction-info"> </div>

     window.onload = function() {
    	var directionInfo = document.getElementById("directionInfo");
    	
    	if (directionInfo.addEventListener) {
    		directionInfo.addEventListener("mousewheel", MouseWheelHandler, false);
    		directionInfo.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
    	}
    	else directionInfo.attachEvent("onmousewheel", MouseWheelHandler);
    	
    	function MouseWheelHandler(e) {
    
    		// cross-browser wheel delta
    		var e = window.event || e;
    		var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    		if(delta > 0)
              directionInfo.innerText = 'Up';
            else
              directionInfo.innerText = 'Down';
    		return false;
    	}
    
    }
.direction-info {
  width:100px;
  height:100px;
  border:1px solid green;
  }
<div id="directionInfo" class="direction-info"> </div>

相关文章：