js监听鼠标的滚轮滚动事件

不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），关于这两个事件这里不做详述，想要了解的朋友请移步：鼠标滚轮(mousewheel)和DOMMouseScroll事件。

具体实现：1. 需要添加事件监听，代码如下：兼容firefox采用addEventListener监听

windowAddMouseWheel();function windowAddMouseWheel() {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("滑轮向上滚动");}}};//给页面绑定滑轮滚动事件if (document.addEventListener) { //火狐使用DOMMouseScroll绑定document.addEventListener('DOMMouseScroll', scrollFunc, false);}//其他浏览器直接绑定滚动事件window.onmousewheel = document.onmousewheel = scrollFunc;}

判断滚轮向上或向下在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个值，detail只取±3，wheelDelta只取±150，其中正数表示为向下，负数表示向上

js监听鼠标的滚轮滚动事件相关推荐

css 鼠标滚动事件,js监听鼠标的滚轮滚动事件教程
不同的有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和dommousescroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚 ...
js监听鼠标拖动事件(按住左键拖动触发，松开左键取消)
此段代码,实现了左键点击id元素内区域后,拖动鼠标到边缘区域滚动条(内部class元素的滚动条)自动滚动,松开鼠标后取消事件业务需要记录一下 $(function () {var div=docum ...
js监听页面或元素scroll事件，滚动到底部或顶部
基本原理: 1.滚动到底部元素的滚动距离 + 元素的可视距离 == 元素的滚动条总距离2.滚动到顶部元素的滚动距离 == 0 监听页面滚动 <!DOCTYPE html> <ht ...
java 监听鼠标点击_java 事件监听 - 鼠标
java 事件监听 - 鼠标 //事件监听 //鼠标事件监听 //鼠标事件监听有两个实现接口 //1.MouseListener 普通的鼠标操作 //2.MouseMotionListener 鼠标的 ...
vue让元素固定_vue 监听dom元素的滚动事件实现某元素吸顶或者固定位置显示
孤单的是人,寂寞的是心. 这只是我写的一个简单的demo,但是所需数据与逻辑已走通, 拿走就能用的那种,希望你能看完区域价格房型更多更多更多更多更多更多更多更多更多更多更多 ...
js 监听浏览器刷新还是关闭事件
// $(window).bind('beforeunload',function(){return '您输入的内容尚未保存,确定离开此页面吗?';}); // window.onbeforeunlo ...
vue 移动端监听div滚动条的滚动事件
第一步:监听div,定义ref <div class="accpdfbox" ref="rightContent" @scroll="scroo ...
js监听鼠标滚轮事件
兼容写法:/Chrome/IE/Opera window.onmousewheel=document.onmousewheel=(e)=>{if(e.wheelDelta<0){conso ...
JS监听鼠标滑轮事件
上才艺 var box = document.getElementById('box');function onMouseWheel(ev) {var ev = ev || window.event; ...
鼠标移入事件_NSTrackingArea 监听鼠标移入与移出事件
在NSView中: var area:NSTrackingArea! override func updateTrackingAreas() {if area != nil {self.removeT ...

js监听鼠标的滚轮滚动事件

js监听鼠标的滚轮滚动事件相关推荐

最新文章

热门文章