JS判断手机触摸、PC滚动条和PC鼠标滚轮的向上或向下滑动

第一种：判断触摸屏（手机平板）手指的向上或向下滑动

var startY = 0;
document.addEventListener("touchstart",function(e){
    startY = e.changedTouches[0].pageY;
},false);
document.addEventListener("touchend",function(e){
    var endY = e.changedTouches[0].pageY;
    var changeVal = endY - startY;
    if(endY < startY){
        alert("向上滑");
    }else if(endY > startY){
        alert("向下滑");
    }else{
        //alert("没有偏移");
    }
},false);

 

第二种：判断电脑端页面滚动条的向上或向下滚动

function scroll( fn ) {
    var beforeScrollTop = $(this).scrollTop(),
    fn = fn || function() {};
    window.addEventListener("scroll", function() {
        var afterScrollTop = $(this).scrollTop(),
            delta = afterScrollTop - beforeScrollTop;
        if( delta === 0 ) return false;
        fn( delta > 0 ? "down" : "up" );
        beforeScrollTop = afterScrollTop;
    }, false);
}
scroll(function(direction) {
	if(direction=='down'){
		alert("向下滑");
	} else if(direction=='up'){
		alert("向上滑");
	} else {
		//alert("没有偏移");
	}
});

 

第三种：判断电脑端鼠标滚轮在页面的向上或向下滚动

 var scrollFunc = function(e) {
         e = e || window.event;
         //先判断浏览器IE，谷歌滑轮事件
         if (e.wheelDelta) {
             if (e.wheelDelta > 0) {
                 alert("向上滑");
             }
             if (e.wheelDelta < 0) {
                 alert("向下滑");
             }
             //Firefox滑轮事件   
         } else if (e.detail) {
             if (e.detail > 0) {
                 alert("向下滑");
             }
             if (e.detail < 0) {
                 alert("向上滑");
             }
         }
}
//给页面绑定滑轮滚动事件
if (document.addEventListener) {
     document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
window.onmousewheel = document.onmousewheel = scrollFunc;

 

 

运行DEMO