翻滚吧，javascript

    我这个人记录东西有个习惯，就是想到的东西就尽量延伸。能想到的地方尽量都写出来。所以这篇文章还是围绕着js响应鼠标滚动来论述。在之前的一篇文章(JS(如何判断)鼠标滚轮事件解析)中，我已经说清楚了对于各个浏览器是如何来用js进行判断鼠标滚轮是向上滚动还是向下滚动。(主要是获取反馈回来的e.wheelDelta或者e.detail，不明白的看上文)

    今天这里就写了一个小例子来进行小小的实战的一下。当然这个小例子有个不同的地方，就是当鼠标移动到固定的box(div盒子)上并滚动滚轮的时候，浏览器默认的滚动条会失效(当然不是什么bug，是js使得默认的滚动条无效。)，当鼠标移出这个box的时候，浏览器滚动条才继续工作。此代码兼容各大浏览器，如有bug欢迎反馈。

    当然看文字不如结合实例来看，下面给出实例代码供大家调戏...

	
0
	 鼠标移动这里，转动滚轮，尽情的调戏吧！
	 鼠标移出这里，转动滚轮，看看它的反应！

    通过运行上述代码，你应该看到鼠标移动到哪个内容块上，滚动滚轮数字会加减(向上变小，向下变大)，并且浏览器默认的滚动条不会滚动了。

如何使得浏览器默认滚动条失效？

    这里是为什么呢？为什么浏览器默认的滚动条失效了呢？你是怎么办到的？

    其实呢，实现这个代码很简单，看下面代码

    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，然后用滚轮控制盒子的内容上下滚动，敬请关注。

建议继续学习：

1. js中鼠标滚轮事件详解    (阅读：2488)