前几天偶然看到某前端群有人在问：JS如何判断鼠标滚轮向上还是向下滚动？

　　我想了想，有点蒙蔽，心想难道不是用scrollTop来判断吗？

　　但我不确定，也出于好奇心，于是开始了一番探索

　　思路：通过event对象里wheelDelta和detail值的正负来判断鼠标滚轮向上还是向下，示例代码如下

　　

　　Demo

  1. <!DOCTYPE HTML>
  2. <html>
  3.      <head>
  4.            <meta charset="UTF-8" />
  5.            <title>JS如何判断鼠标滚轮向上还是向下滚动</title>
  6.            <style>
  7.                 div {
  8.                      width: 200px;
  9.                      height: 1200px;
  10.                      background-color: darkseagreen;
  11.                 }
  12.            </style>
  13.      </head>
  14.      <body>
  15.            <div></div>
  16.            <script>
  17.                 var scrollFunc = function(e) {
  18.                      var e = e || window.event;
  19.                      if(e.wheelDelta) {
  20.                            if(e.wheelDelta > 0) {     //当鼠标滚轮向上滚动时
  21.                                 alert("鼠标滚轮向上滚动");
  22.                            }
  23.                            if(e.wheelDelta < 0) {     //当鼠标滚轮向下滚动时
  24.                                 alert("鼠标滚轮向下滚动");
  25.                            }
  26.                      } else if(e.detail) {
  27.                            if(e.detail < 0) {   //当鼠标滚轮向上滚动时
  28.                                 alert("鼠标滚轮向上滚动");
  29.                            }
  30.                            if(e.detail > 0) {   //当鼠标滚轮向下滚动时
  31.                                 alert("鼠标滚轮向下滚动");
  32.                            }
  33.                      }
  34.                 }
  35.                 //    给页面绑定鼠标滚轮事件,针对火狐的非标准事件
  36.                 window.addEventListener("DOMMouseScroll", scrollFunc)
  37.                 //    给页面绑定鼠标滚轮事件，针对Google，mousewheel非标准事件已被弃用，请使用 wheel事件代替
  38.                 window.addEventListener("wheel", scrollFunc)
  39.                 //    ie不支持wheel事件，若一定要兼容，可使用mousewheel
  40.                 window.addEventListener("mousewheel", scrollFunc)
  41.            </script>
  42.      </body>
  43. </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. 实习生4面美团Java岗，已拿offer！（框架+多线程+集合+JVM）

    美团技术一面 1.自我介绍 说了很多遍了,很流畅捡重点介绍完. 2.问我数据结构算法好不好 挺好的(其实心还是有点虚,不过最近刷了很多题也只能壮着胆子充胖子了) 3.找到单链表的三等分点,如果单链表是 ...

  2. Docker swarm实战总结

    一.简介 Swarm 是 Docker 官方提供的一款集群管理工具,其主要作用是把若干台 Docker 主机抽象为一个整体,并且通过一个入口统一管理这些 Docker 主机上的各种 Docker 资源 ...

  3. poj 2398 Toy Storage(计算几何）

    题目传送门:poj 2398 Toy Storage 题目大意:一个长方形的箱子,里面有一些隔板,每一个隔板都可以纵切这个箱子.隔板将这个箱子分成了一些隔间.向其中扔一些玩具,每个玩具有一个坐标,求有 ...

  4. pymysql的操作

    目录 python 操作mysql 安装pymysql 模块 sql注入问题 产生的原因 解决的方法 连接 查 增 修 删 索引 使用索引的作用 索引的本质 索引的底层原理 索引的种类 索引的创建 主 ...

  5. CentOS7.2下部署zabbix4.0

    整体部署采用centos7+php+apache+mariadb 基础环境配置优化 1. 关闭防火墙 [root@monitor_53 ~]$ systemctl stop firewalld [ro ...

  6. 《CSAPP》实验二：二进制炸弹

    二进制炸弹是第三章<程序的机器级表示>的配套实验,这章主要介绍了x64汇编,包括:操作数的表示方式,数据传送指令,算术和逻辑指令,控制流跳转指令,过程(procedure)的实现与运行时栈 ...

  7. mysql复制表结构和表数据

    我们知道,在SQL Server中,如果要复制表结构和表数据的话,可以使用select into语句. select * into yanggb1 from yanggb; 但是在MySQL中是不支持 ...

  8. 萌新入门Github请看这里，学不会远程教

    一些废话 本文的主旨是为初次接触Github的同学提供一个入门的教程,如果你已经是Github老鸟,可以忽略本文哦,另外本文只是抛砖引玉,其实最好的教程是官方文档!!! Github官网 Github ...

  9. tyvj 1387 迷你火车头

    dp百题进度条[1/100] 一列火车有一个火车头拖着一长串的车厢,每个车厢有若干个乘客. 一旦火车头出了故障,所有的车厢就只能停在铁轨上了,因此铁路局给每列火车配备了三个迷你火车头,每个迷你火车头可 ...

  10. 来来来，告诉你一个简单易上手的KPI打分的方子

    ▋1/3 前言 每个企业都要定期为员工的工作来进行考核,有月度考核.季度考核和年度考核. 这次月度考核,我打算用一种新的方式来执行. 我在我们研发小组内曾分享过能力-意愿四象限图.根据岗位技术能力和工 ...