js 页面无滚动条添加滚轮事件

当页面无滚动条时,滑动滚轮时window.onscroll事件不会相应,此时应该去添加滚轮事件

var MouseWheelHandler=function(e){
e.preventDefault();
e=window.event||e;
var value;
if(e.wheelDelta)
value=e.wheelDelta;
else if(e.detail)
value=-e.detail;
}
var addMouseWheelHandler=function(){
if(document.attachEvent)
document.attachEvent(‘onmousewheel‘,MouseWheelHandler);
else if(document.addEventListener)
document.addEventListener(‘DOMMouseScroll‘,MouseWheelHandler,false);
else
document.addEventListener(‘mousewheel‘,MouseWheelHandler,false);
}
addMouseWheelHandler();

在IE、chrome、opera、safari、firefox中已测试chrome、ie、Firefox可用,

其中要注意的是,Firefox中是通过e.detail来判断滚轮方向,且e.detail=-3方向向上,e.detail=3方向向下

IE、chrome中通过e.wheelDelta判断滚轮方向,e.wheelDelta=120方向向上,e.wheelDelta=-120方向向下

但是,当页面有滚动条时要注意,原始的滚轮事件会失效

时间: 2024-08-29 16:29:46

js 页面无滚动条添加滚轮事件的相关文章

javascript 学习之自定义滚动条加滚轮事件

要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候,只要鼠标滚动的方法就行了,而这通过检测datail的正负号就可以确定 2.其他的用mousewheel(Ie是onmousewheel),通过检测wheelDelta 1 <!doctype html> 2 <html> 3 <head> 4 <title>拖拽

js中鼠标滚轮事件详解

(以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题 附加事件 其中经我测试,IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件. /*IE注册事件*/ if(document.attachEvent){ document.attachEvent('onmousewheel',scrollFunc

js页面触发chargeRequest事件和Nginx获取日志信息

注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6814836302966424072/ 承接上一篇文档<js页面触发pageView和event事件编写> chargeRequest事件 该事件的主要作用是记录用户产生订单的行为/数据 思路图 Keys添加信息 服务器名称列表 chargeRequest事件代码 继续编写 对外暴露方法 准备测试页面 页面代码 访问地址 页面效果 点击按钮发送数据 Nginx日志生成 JsSDK生成日志数据,发送到Nginx服

C# 添加鼠标滚轮事件

首先定义窗体鼠标滚轮事件 1 private void Form1_MouseWheel(object sender, MouseEventArgs e) 2 { 3 Graphics g=this.CreateGraphics(); // GDI+绘图 4 g.Clear(BackColor); // 用背景色刷新绘图区域 5 Pen pen=new Pen(Color.Blue,2); // 定义画笔 6 if (e.Delta != 0) 7 { 8 if (_controlKey) 9

Web前端探索之滚轮事件(wheelEvent)

前段时间使用canvas做滚动条控件,添加滚轮事件时,查阅了一些资料,发现大都是文档描述或简单示例,对于开发者还是不够.wheelEvent对象中的一些属性(比如wheelDelta.detail等)虽然官方文档有完整描述,但部分或大部分浏览器厂商并没有(真正)实现,这就很容易诱导大家错误使用.所以我针对当前常用浏览器重新测试了一下. 测试目标:探索wheelEvent事件中常用属性的有效性,垂直步进算法(滑动幅度)以及与电脑个性化设置的关联 测试环境:Windows操作系统,Firefox54

一屏滚动滚轮事件

参考了one-page.js.为了实现头部尾部效果.我认为很有必要自己写一下,不然用原有的插件我不知道如何实现想要的效果.写的太随意了.以后再做改正吧. $(function() {    $('header').css({        marginTop: '-62px',        transition: "all .25s linear"    });    $('header').removeClass('visible')    var sections = $('.p

HTML中鼠标滚轮事件onmousewheel处理

滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件使用mousewheel,下面我来给大家具体介绍. Firefox使用DOMMouseScroll,其他的浏览器使用mousewheel.滚动事件触发时Firefox使用detail属性捕捉滚轮信息,其他的浏览器使用wheelDelta.不知道为何在该问题上其他厂商和微软的如此一致.Firefox可

JS滚轮事件(mousewheel/DOMMouseScroll)了解

已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记得现代浏览器下触发DOM自定义事件的方法(dispatchEvent). 显然,适当的温习,翻阅以前的东西,或者自己空余时间处理相关的东西还是有必要的.其实,细想,东西记不住是自己自身原因,在折腾的时候就没有想方设法牢记(而不是通过反复使用记住).比方说getBoundingClientRect就是

JS滚轮事件(mousewheel/DOMMouseScroll)了解 (转载)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=3175 一.学无止境.温故知新 //zxx: 本段与技术无关,一些很个人的吐槽,可以跳过已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记得现代浏览器下触发DOM自定义事