如何检查鼠标滚动的顶部还是底部方向？

Question

我正在尝试获取鼠标方向功能。我想知道如何检查鼠标滚动顶部或底部方向。

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

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>

Answer 1

您可以使用HTML5中的mouse wheel events来检测鼠标滚轮操作。上升/下降取决于增量是正（向上）还是负（向下滚动）。

     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>

Answer 2

＆＃13;

＆＃13;

     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;
    	}
    
    }

＆＃13;

.direction-info {
  width:100px;
  height:100px;
  border:1px solid green;
  }

＆＃13;

<div id="directionInfo" class="direction-info"> </div>

＆＃13;

＆＃13;

＆＃13;