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

最新推荐文章于 2024-07-21 02:57:33 发布

weixin_30869099

最新推荐文章于 2024-07-21 02:57:33 发布

阅读量274

点赞数

原文链接：http://www.cnblogs.com/zwp06/p/8398657.html

版权

今天有个朋友问到怎么判断鼠标向上滚动或者向上滚动触发不同的事件，因为之前也想过，但当时使用了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

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

转载于:https://www.cnblogs.com/zwp06/p/8398657.html

weixin_30869099

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
判断鼠标向上滚动或者向上滚动触发不同的事件

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

扫一扫