前幾天偶然看到某前端群有人在問：JS如何判斷鼠標滾輪向上還是向下滾動？
我想了想，有點蒙蔽，心想難道不是用scrollTop來判斷嗎？
但我不確定，也出於好奇心，於是開始了一番探索
思路：通過event對象里wheelDelta和detail值的正負來判斷鼠標滾輪向上還是向下，示例代碼如下
Demo
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>JS如何判斷鼠標滾輪向上還是向下滾動</title> <style> div { width: 200px; height: 1200px; background-color: darkseagreen; } </style> </head> <body> <div></div> <script> var scrollFunc = function(e) { var e = e || window.event; if(e.wheelDelta) { if(e.wheelDelta > 0) { //當鼠標滾輪向上滾動時 alert("鼠標滾輪向上滾動"); } if(e.wheelDelta < 0) { //當鼠標滾輪向下滾動時 alert("鼠標滾輪向下滾動"); } } else if(e.detail) { if(e.detail < 0) { //當鼠標滾輪向上滾動時 alert("鼠標滾輪向上滾動"); } if(e.detail > 0) { //當鼠標滾輪向下滾動時 alert("鼠標滾輪向下滾動"); } } } // 給頁面綁定鼠標滾輪事件,針對火狐的非標准事件 window.addEventListener("DOMMouseScroll", scrollFunc) // 給頁面綁定鼠標滾輪事件，針對Google，mousewheel非標准事件已被棄用，請使用 wheel事件代替 window.addEventListener("wheel", scrollFunc) // ie不支持wheel事件，若一定要兼容，可使用mousewheel window.addEventListener("mousewheel", scrollFunc) </script> </body> </html>
這里有7個注意事項
①：wheelDelta值為正，滾動條向上滾動；值為負，滾動條向下滾動，
detail值剛好相反，值為正，滾動條向下滾動；值為負，滾動條向上滾動
②：wheelDelta值主要針對ie和google；detail值只針對火狐
③：mousewheel非標准事件也被棄用，現官方推薦使用wheel事件代替
④：DOMMouseScroll非標准事件是專為火狐量身打造
⑤：safari 13以下低版本不支持wheel事件
⑥：ie不支持wheel事件，若一定要兼容ie，可使用mousewheel
⑦：鼠標點擊滾動條后不釋放，並直接上下拖動滾動條時上面代碼不適用
補充官方說明：
原文： https://blog.csdn.net/kongjiea/article/details/18557407 （原文detail值判斷條件寫反了，上面示例代碼是我更正和優化后的）