JavaScript判断鼠标中键滑轮的上下滚动_js滚轮滚动一下是多少-程序员宅基地
技术标签： 鼠标 JavaScript web开发录 javascript
我们现在操作电脑最常用的就是鼠标，对于鼠标来说，左右键的处理事件必不可少，但是鼠标中键的上下滚动也可以在页面中做出相当炫的效果。
那么使用JavaScript如何判断鼠标滑轮是向下还是向上滚动呢？
因为不同的浏览器有 不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），所以在这个过程中需要添加事件监听， 代码如下：兼容firefox采用addEventListener监听。
/*注册事件*/
if(document.addEventListener){ //兼容firefox
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome另外判断滚轮的上下滚动在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、 Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；detail只取±3，wheelDelta只 取±120。
具体的示例代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标的上下滑动</title>
</head>
<body>
<label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta"/>
<label for="detail">滚动值:(Firefox)</label><input type="text" id="detail"/>
<script type="text/javascript">
var scrollFunc=function(e){
e = e || window.event;
var t1 = document.getElementById("wheelDelta");
var t2 = document.getElementById("detail");
if (e.wheelDelta) {
//IE/Opera/Chrome
t1.value = e.wheelDelta;
} else if (e.detail) {
//Firefox
t2.value = e.detail;
}
}
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
</script>
</body>
</html>运行结果如下：
谷歌：
IE：
Opera：
火狐：
通过运行结果可以得出：
- 在非firefox浏览器中，滚轮向上滚动返回的数值是120，向下滚动返回-120
- 而在firefox浏览器中，滚轮向上滚动返回的数值是-3，向下滚动返回3
所以在以后的运用中可以直接参照下面的代码，将鼠标上下移动之后需要执行的代码段镶嵌到相应的部分就可以了，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断鼠标是向上滑动还是向下滑动</title>
<style>
div {
height: 3000px;width: 100%;background: green;}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var scrollFunc = function (e) {
e = e || window.event;
if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) {
//当滑轮向上滚动时执行的代码段
alert("滑轮向上滚动");
}
if (e.wheelDelta < 0) {
//当滑轮向下滚动时执行的代码段
alert("滑轮向下滚动");
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail < 0) {
//当滑轮向上滚动时执行的代码段
alert("滑轮向上滚动");
}
if (e.detail > 0) {
//当滑轮向下滚动时执行的代码段
alert("滑轮向下滚动");
}
}
}
//给页面绑定滑轮滚动事件 Firefox
if (document.addEventListener) {
//firefox
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滚动滑轮触发scrollFunc方法 ie 谷歌
window.onmousewheel = document.onmousewheel = scrollFunc;
</script>
</body>
</html> 智能推荐
vue引入原生高德地图_前端引入原生地图-程序员宅基地
文章浏览阅读556次，点赞2次，收藏3次。由于工作上的需要，今天捣鼓了半天高德地图。如果定制化开发需求不太高的话，可以用vue-amap，这个我就不多说了，详细就看官网 https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install然而我们公司需要英文版的高德，我看vue-amap中好像没有这方面的配置，而且还有一些其他的定制化开发需求，然后就只用原生的高德。其实原生的引入也不复杂，但是有几个坑要填一下。1. index.html注意，引入的高德js一定要放在头部而_前端引入原生地图
ViewGroup重写大法 （一）-程序员宅基地
文章浏览阅读104次。本文介绍ViewGroup重写，我们所熟知的LinearLayout，RelativeLayout，FrameLayout等等，所有的容器类都是ViewGroup的子类，ViewGroup又继承View。我们在熟练应用这些现成的系统布局的时候可能有时候就不能满足我们自己的需求了，这是我们就要自己重写一个容器来实现效果。ViewGroup重写可以达到各种效果，下面写一个简单的重写一个Vi..._viewgroup 重写
Stm32学习笔记，3万字超详细_stm32笔记-程序员宅基地
文章浏览阅读1.8w次，点赞279次，收藏1.5k次。本文章主要记录本人在学习stm32过程中的笔记，也插入了不少的例程代码，方便到时候CV。绝大多数内容为本人手写，小部分来自stm32官方的中文参考手册以及网上其他文章；代码部分大多来自江科大和正点原子的例程，注释是我自己添加；配图来自江科大/正点原子/中文参考手册。笔记内容都是平时自己一点点添加，不知不觉都已经这么长了。其实每一个标题其实都可以发一篇，但是这样搞太琐碎了，所以还是就这样吧。_stm32笔记
CTS(13)---CTS 测试之Media相关测试failed 小结（一）_mediacodec框架 cts-程序员宅基地
文章浏览阅读1.8k次。Android o CTS 测试之Media相关测试failed 小结（一）CTSCTS 即兼容性测试套件，CTS 在桌面设备上运行，并直接在连接的设备或模拟器上执行测试用例。CTS 是一套单元测试，旨在集成到工程师构建设备的日常工作流程（例如通过连续构建系统）中。其目的是尽早发现不兼容性，并确保软件在整个开发过程中保持兼容性。CTS 是一个自动化测试工具，其中包括两个主要软件组件：CTS tra..._mediacodec框架 cts
chosen.js插件使用，回显，动态添加选项-程序员宅基地
文章浏览阅读4.5k次。官网：https://harvesthq.github.io/chosen/实例化$(".chosen-select").chosen({disable_search_threshold: 10});赋值var optValue = $(".chosen-select").val();回显1.设置回显的值$(".chosen-select").val(“opt1”);2.触发cho..._chosen.js
C++ uint8_t数据串如何按位写入_unit8_t 集合 赋值 c++-程序员宅基地
文章浏览阅读1.9k次。撸码不易，网上找不到，索性自己写，且撸且珍惜！void bitsWrite(uint8_t* buff, int pos, int size, uint32_t value){ uint32_t index[] = { 0x80000000, 0x40000000, 0x20000000, 0x10000000, 0x8000000, 0x4000000, 0x2000000, 0x1000000, 0x800000, 0x400000, 0_unit8_t 集合 赋值 c++
随便推点
Javaweb框架 思维导图_javaweb框架图-程序员宅基地
文章浏览阅读748次。javaweb知识点_javaweb框架图
adb的升级与版本更新_adb iptabls怎么升级-程序员宅基地
文章浏览阅读1.1w次，点赞3次，收藏16次。adb是没有自动升级的命令的，如果想要更新adb的版本，我们可以在网上找到自己想要的版本进行更新给大家提供几个版本https://pan.baidu.com/s/1yd0dsmWn5CK08MlyuubR7g&shfl=shareset 提取码: 94z81、下载解压后我们可以找到下面几个文件，并复制2、找到adb安装的文件夹下的platform-tools文件夹，我这里是..._adb iptabls怎么升级
微信苹果版删除所有的聊天记录的图文教程_mac微信怎么删除聊天列表-程序员宅基地
文章浏览阅读3.8k次。很多用户可能都知道怎么在Windows系统上删除微信的聊天记录，那么苹果电脑上的微信软件怎么删除所有的聊天记录呢？下面小编就专门来给大家讲下微信mac版删除所有的聊天记录的图文教程。点击后会弹出提示窗口，点击这里的确认按钮就可以将其清理掉了。在这里选择要清理的数据，然后点击下方右边的清理按钮就行了。在mac上打开微信后，点击左下角的横线图标。然后再点击这里的管理微信聊天数据按钮。打开了设置窗口，点击上方的“通用”。在这里点击下方的前往清理按钮。点击弹出菜单里的“设置”。_mac微信怎么删除聊天列表
【报错笔记】数据类型转换时报错：Request processing failed；nested exception is java.lang.NumberFormatException:..._request processing failed; nested exception is jav-程序员宅基地
文章浏览阅读7.7k次。数据类型转换时报错：Request processing failed;nested exception is java.lang.NumberFormatException:For input String “20151512345”报错原因：数字格式异常，接着后面有 For input string: “201515612343” 提示，这就告诉我们你当前想把 “201515612343” 转换成数字类型时出错了。解决方案：使用2015151612343这个数字太大了，所以直接使用string_request processing failed; nested exception is java.lang.numberformatexcepti
qml 自定义消息框_Qt qml 自定义消息提示框-程序员宅基地
文章浏览阅读387次。版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/a844651990/article/details/78376767Qt qml 自定义消息提示框QtQuick有提供比较传统的信息提示框MessageDialog，但是实际开发过程并不太能满足我们的需求。下面是根据controls2模块中..._qml 自定义 messagedialog
Redis.conf 默认出厂内容_默认出厂的原始redis.conf文件全部内容-程序员宅基地
文章浏览阅读599次。# Redis configuration file example.## Note that in order to read the configuration file, Redis must be# started with the file path as first argument:## ./redis-server /path/to/redis.conf # Note on units: when memory size is needed, it is pos._默认出厂的原始redis.conf文件全部内容