判断鼠标向上滚动或者向上滚动触发不同的事件

今天有个朋友问到怎么判断鼠标向上滚动或者向上滚动触发不同的事件，因为之前也想过，但当时使用了jquery.mousewheel.js这个插件，可能也有一些朋友用到的，那今天就把之前写过的一个小demo分享一下。也许网上也有很多小demo，也会给大家推荐一些插件，主要用起来方便顺手能满足需求就好，自己写也好，用插件也好，这个个人喜好吧。这个只是个很简单的判断逻辑。请往下看。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>判断鼠标向下向上滚动的demo</title>
<style>
body{
    height: 3333px;
}
</style>
<body>
    
</body>
<script>
//这里主要考虑兼容的问题
var agent = navigator.userAgent;
if (/.*Firefox.*/.test(agent)) {
    document.addEventListener("DOMMouseScroll", function(e) {
        e = e || window.event;
        var detail = e.detail;
        if (detail > 0) {
            console.log("鼠标向下滚动");
        } else {
            console.warn("鼠标向上滚动");
        }
    });
} else {
    document.onmousewheel = function(e) {
        e = e || window.event;
        var wheelDelta = e.wheelDelta;
        if (wheelDelta > 0) {
            console.log("鼠标向上滚动");
        } else {
            console.warn("鼠标向下滚动");
        }
    }
}
</script>
</head>

</html>

View Code

很简单，也很简洁，希望以后遇到的人找到自己的解决方案，或者自己动手写出合适自己的解决方法。