当页面无滚动条时,滑动滚轮时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方向向下

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

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

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

    要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候, ...

  2. JS如何为iframe添加onclick事件

    如果页面上有iframe时,鼠标点击在iframe内时,包含iframe的document是不响应任何事件的, 例如: $("#iframe1").click(function() ...

  3. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

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

    注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6814836302966424072/ 承接上一篇文档<js页面触发pageView和event事件编写> ...

  5. HTML中鼠标滚轮事件onmousewheel处理

    滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件 ...

  6. HTML中鼠标滚轮事件onmousewheel

    IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件. /*IE注册事件*/ if(document.attachEvent){ document.attachEvent('onm ...

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

    已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记 ...

  8. js 滚轮事件 滚轮焦点图(轮播图)

    利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法:   <!doctype html> <html> <head> <meta charse ...

  9. js整频滚动展示效果(函数节流鼠标滚轮事件)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...

  2. 初步认识Node 之Node为何物

    很多人即便是在使用了Node之后也不知道它到底是什么,阅读完本文你应该会有一个初步的.具体的概念了.    Node的目标 提供一种简单的构建可伸缩网络程序的方法.那么,什么是可伸缩网络程序呢?可伸缩 ...

  3. console.log("A"-"B"+"3")=?

    (点击上方的订阅号,可快速关注,关注有惊喜哦^_^) 前不久看到一道JS基础题目,做了一下竟然错了一半...在此分享一下: 先把题目放上来,大家可以自己测试一下再看答案哦^_^ ①console.lo ...

  4. u-boot源码分析之C语言段

    题外话: 最近一直在学习u-boot的源代码,从代码量到代码风格,都让我认识到什么才是真正的程序.以往我所学到的C语言知识和u-boot的源代码相比,实在不值一提.说到底,机器都是0和1控制的.感觉这 ...

  5. MapReduce和Spark写入Hbase多表总结

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 转载请注明出处 大家都知道用mapreduce或者spark写入已知的hbase中的表时,直接在mapreduc ...

  6. Redis命令拾遗五(有序集合)

    本文版权归博客园和作者吴双本人共同所有,博客园蜗牛NoSql系列分享 http://www.cnblogs.com/tdws/tag/NoSql/ Sorted Set 有序集合—Sorted Set ...

  7. add-two-numbers

    leetcode开篇~ 问题描述: You are given two linked lists representing two non-negative numbers. The digits a ...

  8. SIMLock锁卡功能解析

    一.锁卡背景介绍 锁卡即SIMLock,当手机开机启动或者插入SIM卡时,手机modem侧预置在NV项中的配置信息会与SIM卡中的信息做比对,检测是否匹配.若匹配,则SIM卡可以正常使用.若不匹配,则 ...

  9. Js 实现登录验证码

    Js代码: /** * 验证码 */function yzm(){ var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a','b','c ...

  10. hadoop 2.7.2 + zookeeper 高可用集群部署

    一.环境说明 虚拟机:vmware 11 操作系统:Ubuntu 16.04 Hadoop版本:2.7.2 Zookeeper版本:3.4.9 二.节点部署说明 三.Hosts增加配置 sudo ge ...