JS如何实现响应滚轮(同时设置滚动条无效)
我这个人记录东西有个习惯,就是想到的东西就尽量延伸。能想到的地方尽量都写出来。所以这篇文章还是围绕着js响应鼠标滚动来论述。在之前的一篇文章(JS(如何判断)鼠标滚轮事件解析)中,我已经说清楚了对于各个浏览器是如何来用js进行判断鼠标滚轮是向上滚动还是向下滚动。(主要是获取反馈回来的e.wheelDelta或者e.detail,不明白的看上文)
今天这里就写了一个小例子来进行小小的实战的一下。当然这个小例子有个不同的地方,就是当鼠标移动到固定的box(div盒子)上并滚动滚轮的时候,浏览器默认的滚动条会失效(当然不是什么bug,是js使得默认的滚动条无效。),当鼠标移出这个box的时候,浏览器滚动条才继续工作。此代码兼容各大浏览器,如有bug欢迎反馈。
当然看文字不如结合实例来看,下面给出实例代码供大家调戏...
通过运行上述代码,你应该看到鼠标移动到哪个内容块上,滚动滚轮数字会加减(向上变小,向下变大),并且浏览器默认的滚动条不会滚动了。
如何使得浏览器默认滚动条失效?
这里是为什么呢?为什么浏览器默认的滚动条失效了呢?你是怎么办到的?
其实呢,实现这个代码很简单,看下面代码
if (navigator.userAgent.toLowerCase().indexOf(\'msie\') >= 0) {
event.returnValue = false;
} else {
e.preventDefault();
};
主要是针对ie的 event.returnValue = false; 与非ie浏览器 e.preventDefault() 在作用。
preventDefault是什么?如何使用
这个函数是阻止浏览器执行与事件关联的默认动作。
关于preventDefault的具体用法说明以及案例,自己百度先。下面给两个链接可以参考下,一个是w3school的说明,另外一个jquery中封装的preventDefault的用法。
大家可以看到上面的代码在firefox中是有效的,并且能够正确执行。如果你之前的一篇文章你就会想要提问,我的代码明明是执行的onmousewheel事件,而firefox是默认不支持这个事件的。我是怎么做到的呢?怎么做到的。。。看下面
如何让firefox支持onmousewheel事件
呵呵,上面的话很有废话的意思,不过废话多点就多点吧,给大家调调口味,总是重口味的技术不太好,不利于消化。
你肯定看到了后面的针对firefox的事件监听,呵呵,我没有把读者当傻子,只是我想要水一下而已。不废话了,代码部分。
if (navigator.userAgent.toLowerCase().indexOf(\'firefox\') >= 0) {
//firefox支持onmousewheel
addEventListener(\'DOMMouseScroll\',
function(e) {
var obj = e.target;
var onmousewheel;
while (obj) {
onmousewheel = obj.getAttribute(\'onmousewheel\') || obj.onmousewheel;
if (onmousewheel) break;
if (obj.tagName == \'BODY\') break;
obj = obj.parentNode;
};
if (onmousewheel) {
if (e.preventDefault) e.preventDefault();
e.returnValue = false; //禁止页面滚动
if (typeof obj.onmousewheel != \'function\') {
//将onmousewheel转换成function
eval(\'window._tmpFun = function(event){\' + onmousewheel + \'}\');
obj.onmousewheel = window._tmpFun;
window._tmpFun = null;
};
// 不直接执行是因为若onmousewheel(e)运行时间较长的话,会导致锁定滚动失效,使用setTimeout可避免
setTimeout(function() {
obj.onmousewheel(e);
},
1);
};
},
false);
};
牛魔王的世界观基情提示:可以将此代码加入到全局js文件里面,这样伟大的firefox就能支持不凡的onmousewheel事件了。
接下来讲点神马呢,后面的文章可能会涉及,制作一个带自定义滚动条的box,然后用滚轮控制盒子的内容上下滚动,敬请关注。
建议继续学习:
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:痞子 来源: 牛魔王的世界观
- 标签: 滚轮
- 发布时间:2012-09-06 23:59:27
- [66] Go Reflect 性能
- [66] Oracle MTS模式下 进程地址与会话信
- [65] 如何拿下简短的域名
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [59] android 开发入门
- [59] 图书馆的世界纪录
- [58] 【社会化设计】自我(self)部分――欢迎区
- [53] 视觉调整-设计师 vs. 逻辑
- [47] 界面设计速成
- [47] 读书笔记-壹百度:百度十年千倍的29条法则