js滚轮事件
首先,不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持)。w3c文档已经废弃了onmousewheel事件,建议使用onwheel鼠标事件。
该事件的浏览器支持是:
这样就不用再分浏览器绑定事件了,如果不用兼容太低的版本或者safari浏览器。
现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个 值,detail只取±3,其中负数表示为向上,正数表示为向下;wheelDelta只取±xxx(数值各个浏览器不定),其中负数表示为向下,正数数表示向上。
写一个函数判断鼠标上滚还是下滚:
function wheelUpDown (obj) {
obj.addEventListener("wheel",function (e) {
var wheelNum = e.wheelDelta || -e.deltaY; //我用的ff版本是61.0.1,e.delta在鼠标滚动不变化,为0,变化的是e.deltaY;
if(wheelNum > 0){
alert("鼠标上滚");
}
if(wheelNum < 0){
alert("鼠标下滚");
}
})
}
js滚轮事件的更多相关文章
- 学习 JS滚轮事件(mousewheel/DOMMouseScroll)
学习 JS滚轮事件(mousewheel/DOMMouseScroll) 1-1 滚轮事件兼容性的差异 IE,chrome,safari 浏览器都使用 onmousewheel, 只有firefo ...
- JS滚轮事件(mousewheel/DOMMouseScroll)了解
已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记 ...
- js 滚轮事件 滚轮焦点图(轮播图)
利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法: <!doctype html> <html> <head> <meta charse ...
- JS滚轮事件onmousewheel
典型的应用时鼠标滚轮滚动控制图片或者文字的大小,例如此类的转动鼠标滚轮实现缩放等等交互效果中,会用到 Mousewheel 事件.在大多数浏览器(IE6, IE7, IE8, Opera 10+, S ...
- js滚轮事件需要注意的兼容性问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js滚轮事件兼容写法
/** * 简易的事件添加方法 */ define(function(require, exports, module) { exports.addEvent = (function(window, ...
- JS滚轮事件封装
wheel(function(isTrue){ console.log(isTrue); }) function wheel(callback){ if(navigator.userAgent.ind ...
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- 两种js监听滚轮事件的方式
前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = functio ...
随机推荐
- 【转】Entity framework 6 编写的通用数据类
原文:http://blog.csdn.net/laokaizzz/article/details/25730813 准备参考
- Centos下Kubernetes+Flannel部署(新)
一.准备工作 1) 三台centos主机 k8s master: 10.11.151.97 tc-151-97 k8s node1: 10.11.151.100 tc-151-100 k8s no ...
- boost::asio基本使用
一.Asio网络库 截止到C++17,C++标准库都没有加入网络通信库.实际项目网络编程是非常常见的功能,直接使用操作系统API是低效率且不稳定的,比较好的方法是借助第三方成熟可靠的网络库.据我所知C ...
- sql典例分析
1. 条件过滤 & Having 表结构 #tab_a #tab_b 表关系 tab_a.id = tab_b.relation_id 表数据 需求 查新把tab_a的ID对应的表tab_b的 ...
- vuex中怎么把‘库’中的状态对象赋值给内部对象(三种方法)
一.通过computed的计算属性直接赋值 import store from '@/store/store' export default{ name: 'count', data(){ retur ...
- b-树和b+树以及mysql索引
b-树(m阶): 1.根节点至少有2个子节点; 2.中间节点包含k个子节点和k-1个元素,m/2 <= k <= m; 3.每个节点中的元素从小到大排列,节点当中k-1个元素正好是k个孩子 ...
- C#语法之Linq查询基础一
Linq做.Net开发的应该都用过,有些地方很复杂的逻辑用Linq很方便的解决.对于Linq to object.Linq to xml.Linq to sql.Linq to Entity(EF)都 ...
- dev控件ASPxComboBox设置ReadOnly="true"后
dev控件ASPxComboBox设置ReadOnly="true"后,在后台OnCallback事件中赋值前台不显示
- MyBatis和Hibernate的优缺点对比。
Hibernate的优点: 1.hibernate是全自动,hibernate完全可以通过对象关系模型实现对数据库的操作,拥有完整的JavaBean对象与数据库的映射结构来自动生成sql. 2.功能强 ...
- 【转】SQL语句统计每天、每月、每年的数据
原文:https://www.cnblogs.com/Fooo/p/3435687.html SQL语句统计每天.每月.每年的数据 1.每年select year(ordertime) 年,sum(T ...