今天有个朋友问到怎么判断鼠标向上滚动或者向上滚动触发不同的事件,因为之前也想过,但当时使用了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>
很简单,也很简洁,希望以后遇到的人找到自己的解决方案,或者自己动手写出合适自己的解决方法。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步