javascript通过浏览器滚动条滚动方向判断鼠标上下滚动的函数代码

制作网页时，需要判断鼠标向上滚动还是向下滚动，首先想到的是通过 jquery.mousewheel.js 插件实现，但如果浏览器滚动条是正常状态，也可以通过滚动条的滚动位置来检测鼠标是向上滚动还是向下滚动，实现思路比较简单，就是比例滚动条滚动前后的位置变化即可。

函数代码：

function mouseScrollDirection ( fn ) {
    var beforeScrollTop = document.documentElement.scrollTop || document.body.scrollTop,
    fn = fn || function() {};
    window.addEventListener('scroll', function() {
        var afterScrollTop = document.documentElement.scrollTop || document.body.scrollTop,
            delta = afterScrollTop - beforeScrollTop;
        if( delta === 0 ) return false;
        fn( delta > 0 ? 'down' : 'up' );
        beforeScrollTop = afterScrollTop;
    }, false);
}

调用函数

mouseScrollDirection(function(direction) {
	if(direction == 'up'){
		alert('鼠标向上滚动');
	}else{
		alert('鼠标向下滚动');
	}      
});

注意：不支持如果固定了滚动条，或者不显示滚动条的页面判断鼠标滚动方向。

附：jquery判断鼠标上下滚动插件jquery.mousewheel.js