前几天偶然看到某前端群有人在问：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值判断条件写反了，上面示例代码是我更正和优化后的）

JS如何判断鼠标滚轮向上还是向下滚动的更多相关文章

  1. js中判断鼠标滚轮方向的方法

      前  言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...

  2. js/jq判断鼠标滚轮方向

    js判断鼠标滚轮方向: var scrollFunc = function (e) { e = e || window.event; if (e.wheelDelta) { //判断浏览器IE,谷歌滑 ...

  3. javaScript判断鼠标滚轮的上下滚动

    分享一个js实现判断鼠标滚轮的上下滚动: <script type="text/javascript"> var scrollFunc = function (e) { ...

  4. JS 判断鼠标滚轮的上下滚动

    JS 判断鼠标滚轮的上下滚动   <script type="text/javascript"> var scrollFunc = function (e) { e = ...

  5. js 判断鼠标滚轮方向

    最近因为公司项目的要求,需要做页面的全屏滚动切换效果. 页面的切换,需要脚本监听鼠标滑轮的滚动事件,来判断页面是向上切换or向下切换. 这里的脚本很简单,我就直接贴出来吧. $('html').on( ...

  6. js中的鼠标滚轮事件

    ## 事件对象 event 1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标) window.onclick = func ...

  7. js -- img 随着鼠标滚轮的变化变化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jQuery带控制按钮向上和向下滚动文本列表

    效果:http://hovertree.com/texiao/jquery/64/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head&g ...

  9. hexo next 主题 : 实现点击跳转到文章的时候文章的页面自动实现滚轮效果，向下滚动到阅读的位置。

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景: 博主的博客希望实现能够在点击到某个文章 ...

随机推荐

  1. JS基础-DOM

    DOM DOM 事件的级别 DOM 事件模型 DOM 事件流 DOM 事件捕获的具体流程 Event 对象的常见应用 自定义事件 DOM概述 | MDN DOM | MDN DOM操作 DOM事件级别 ...

  2. 2019百度阿里Java面试题（基础+框架+数据库+分布式+JVM+多线程）

    前言 很多朋友对面试不够了解,不知道如何准备,对面试环节的设置以及目的不够了解,因此成功率不高.通常情况下校招生面试的成功率低于1%,而社招的面试成功率也低于5%,所以对于候选人一定要知道设立面试的初 ...

  3. 使用mongoshake进行oplog同步读取，解决乱码问题

    mongoshake 是个开源的用户mongo数据迁移和同步的工具,支持往各种目标源头写数据 具体:https://github.com/alibaba/MongoShake 有业务场景想把oplog ...

  4. vue-cli4.0脚手架安装

    10月16日,官方发布消息称Vue-cli 4.0正式版发布,并且强烈建议升级;小编也是刚刚安装了最新版本的脚手架看看更新了什么 安装和vue-cli3.0的是一模一样的,对比了一下3.0的脚手架,除 ...

  5. elementui移动dialog

    1.在创建Vue对象时添加全局属性 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHea ...

  6. Springboot Activiti6 工作流 集成代码生成器 shiro 权限 vue.js html 跨域 前后分离

    官网:www.fhadmin.org 特别注意: Springboot 工作流  前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+ activiti6.0 ...

  7. 记录AJAX充电点点滴滴

    首先要明白什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更 ...

  8. CRM、ERP是什么？

    CRM 全称 Customer Relationship Management,中文意思是客户关系管理. 为什么会有CRM? 因为我们进入到了产能过剩时代,从卖方市场过渡到买方市场,为了将产品卖出去, ...

  9. 利用百度AI快速开发出一款“问答机器人”并接入小程序

    先看实现效果: 利用百度UNIT预置的智能问答技能和微信小程序,实现语音问答机器人.这里主要介绍小程序功能开发实现过程,分享主要功能实现的子程序模块,都是干货! 想了解UNIT预置技能调用,请参看我之 ...

  10. Android 开机充电图标和充电动画

    首先驱动需要先获取到2个power supply kernel\msm-3.18\drivers\usb\phy\phy-msm-usb.c motg->usb_psy.name = " ...