JS如何判断鼠标滚轮向上还是向下滚动
前几天偶然看到某前端群有人在问：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如何判断鼠标滚轮向上还是向下滚动的更多相关文章
- js中判断鼠标滚轮方向的方法
前 言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...
- js/jq判断鼠标滚轮方向
js判断鼠标滚轮方向: var scrollFunc = function (e) { e = e || window.event; if (e.wheelDelta) { //判断浏览器IE,谷歌滑 ...
- javaScript判断鼠标滚轮的上下滚动
分享一个js实现判断鼠标滚轮的上下滚动: <script type="text/javascript"> var scrollFunc = function (e) { ...
- JS 判断鼠标滚轮的上下滚动
JS 判断鼠标滚轮的上下滚动 <script type="text/javascript"> var scrollFunc = function (e) { e = ...
- js 判断鼠标滚轮方向
最近因为公司项目的要求,需要做页面的全屏滚动切换效果. 页面的切换,需要脚本监听鼠标滑轮的滚动事件,来判断页面是向上切换or向下切换. 这里的脚本很简单,我就直接贴出来吧. $('html').on( ...
- js中的鼠标滚轮事件
## 事件对象 event 1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标) window.onclick = func ...
- js -- img 随着鼠标滚轮的变化变化
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery带控制按钮向上和向下滚动文本列表
效果:http://hovertree.com/texiao/jquery/64/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head&g ...
- hexo next 主题 : 实现点击跳转到文章的时候文章的页面自动实现滚轮效果，向下滚动到阅读的位置。
个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景: 博主的博客希望实现能够在点击到某个文章 ...
随机推荐
- Ubuntu虚拟机安装VMware Tools
前言 在用VMware安装好Linux虚拟机后,发现在虚拟机下安装的Ubuntu16.04 64位无法进入全屏模式,同时存在物理机和虚拟机之间无法实现文件传输的问题,通过安装VMware Tools得 ...
- 牛客练习赛32B Xor Path （树形dp）
时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言524288K 64bit IO Format: %lld 题目描述 给定一棵n个点的树,每个点有权值.定义表示 ...
- 【CHRIS RICHARDSON 微服务系列】事件驱动的数据管理-5
编者的话 |本文来自 Nginx 官方博客,是「Chris Richardson 微服务」系列的第五篇文章.第一篇文章介绍了微服务架构模式,并且讨论了使用微服务的优缺点:第二和第三篇描述了微服务架构模 ...
- sessionstorage中存储JSON数据
在web开发时,可能经常会用到sessionstorage存储数据,存储单个字符串数据变量时并不困难 var str = 'This is a string'; sessionstorage.setI ...
- Android动态添加碎片
我们编写一个能够用过按钮动态更替碎片的APP,首先在主页上显示第一个碎片,点击按钮后可以替换到第二个碎片,或者删除已经替换掉的第二个碎片. 一.MainActivity.java import and ...
- i2c_msg 标志位 - repeat-start
i2c_msg标志位 路径:linux-2.6.38/include/linux/i2c.h I2C_M_IGNORE_NAK: 设置这个标志意味当前i2c_msg忽略I2C器件的ack和n ...
- easybcd误删Win10启动项，UEFI恢复引导
参考文章https://blog.csdn.net/A_Sen_A/article/details/89545311 想给电脑安Ubuntu双系统,期间根据一些不靠谱的文章用了easybcd软件,Ub ...
- Flutter - flutter desktop embedding / flutter 桌面支持
2019年5月9日,随着谷歌在IO19宣布Flutter支持Web平台,就标志着Flutter已经全面支持所有平台(移动.网页.桌面.嵌入式). 现编一个跨平台小段子: 微软Xarmarin:喵喵喵? ...
- 【每天一题】LeetCode 0026. 删除排序数组中的重复项
开源地址:https://github.com/jiauzhang/algorithms 题目描述 /* * https://leetcode-cn.com/problems/remove-dupli ...
- Maven发布封装到中央仓库时候报错：no default secret key: No secret key
今天因为发布swagger-spring-boot-starter做一个问题的修复,然后碰到了下面这个问题,记录一下解决过程,帮助后续碰到类似问题的童鞋: *gpg: WARNING: "- ...