JavaScript之鼠标滚动事件

最近正在做评论模块的image LazyLoad（图片资源延迟加载/按需加载），其中涉及到一些mouse scroll操作。老外的Mouse wheel programming in JavaScript一文，对我很有价值。

——以下为翻译——

本文有些信息可能已经过时，但是大部分知识点仍旧有用。

Web应用日新月异，也越来越接近于桌面应用。功能上越来越强，比如drag&drop（拖拽），autocompletition（自动完成/自动补全）等等。在AJAX的配合下，这些应用都易于实现。

本文要说的并不是AJAX技术，而是关于相对简单的用户输入手段——鼠标滚轮。目前已经很难找到不带滚轮的鼠标了，大多数用户会使用滚轮用来滚动浏览器、缩放页面/照片之类的操作。Web应用在这个领域却鲜有建树。本文将提供一些基于鼠标滚轮的javascript事件和相关的处理手段。

Annotated code 带注释的代码

下面是一段带注释的javascript代码，阐述鼠标滚动事件背后的一些原理。//此处不准备对代码注释进行翻译，查看源代码

 

/** 
 * This is high-level function. 
 * It must react to delta being more/less than zero. 
 */  
function handle(delta) {  
        if (delta < 0)  
        ...;  
        else  
        ...;  
}  
  
/**  
 * Event handler for mouse wheel event. 
 */  
function wheel(event){  
    var delta = 0;  
    if (!event) /* For IE. */   
        event = window.event;  
    if (event.wheelDelta) { /* IE/Opera. */  
        delta = event.wheelDelta / 120;  
        /**  
         * In Opera 9, delta differs in sign as compared to IE. 
         */  
        if (window.opera)   
            delta = -delta;  
    }  
    else   
      
        if (event.detail) {  
        /** Mozilla case. */  
        /** 
         * In Mozilla, sign of delta is different than in IE. 
         * Also, delta is multiple of 3. 
         */  
            delta = -event.detail / 3;  
        }  
    /**  
     * If delta is nonzero, handle it. 
     * Basically, delta is now positive if wheel was scrolled up, 
     * and negative, if wheel was scrolled down. 
     */  
    if (delta)   
        handle(delta);  
    /**  
     * Prevent default actions caused by mouse wheel. 
     * That might be ugly, but we handle scrolls somehow 
     * anyway, so don't bother here.. 
     */  
    if (event.preventDefault)   
        event.preventDefault();  
    event.returnValue = false;  
}  
  
  
/**  
 * Initialization code. 
 * If you use your own event management code, change it as required. 
 */  
if (window.addEventListener)   
    /** DOMMouseScroll is for mozilla. */  
    window.addEventListener('DOMMouseScroll', wheel, false);  
/** IE/Opera. */  
window.onmousewheel = document.onmousewheel = wheel;  

 

Handler function 事件处理函数

代码中的"handle"是用户的自定义函数，其中带了一个参数为delta。由于浏览器平台的差异性，我们只能够捕捉到滚动的差值（deltas），这个值是滚轮的变化值。

通常，你只能获取到delta的正值与负值，如左图所示。

如果delta是正值，滚动向前滚动，反之则为向后滚动。在许多应用中，向上滚动就是页面向上滚动。

你可能很疑惑，delta的实际值到底会是什么。实际上，上述代码其实是被调整过的，使得99%的情况下获取到的值要么-1要么就是+1。即时如此，如果在firefox下迅速滚动，会出现±3的情况。Digg上有人提出14的delta值，Geoffrey Kruse在他的pc上甚至得到了76的值。当然了，这也取决于鼠标敏感度的设置。firefox有一些微妙的现象：如果快速滚动的同时点击右键（原文 scrolling the wheel fast and then push the right mouse button for the menu），会报出例如30的delta值。//不明白作者是如何触发这个操作的

Robert Gerlach在Safari下做了一些测试：”只是滚动一圈的话，值为+-0.1，如果滚动地稍微快点的话（多滚动几圈），这个值也会变大。 这是因为Mac OS下有鼠标滚轮加速功能。滚动一次，浏览器滚动1像素，滚动3次，浏览器却滚动30像素”。同时他也对Camino（基于Gecko的内核引擎）进行研究：“与Safari相似（+- 0.3 to +-Infinity），虽然使用了与firefox相同的内核引擎，但结果这个delta值却只在+-2.666666里浮动，无论滚动速度如何。”

在此可以看一下测试页面A与测试页面B。

Compatability 兼容性

//作者在此感谢了许多人，不作翻译

Usability 可用性

Few “don't”s——几个不要

• 不要使用滚动进行一些不符合常理的操作，用户已经习惯用滚轮来作页面滚动之类的操作了。一些map应用使用滚轮进行缩放，这个操作符合用户的预期，大胆使用即可。
• 不要强迫用户依赖滚轮进行操作。//作者的意思是应该提供一种可替换方案，使得在滚轮操作无效的情况下，应用程序仍旧可用
• 尽量避免全局滚动条，这些滚动条可能会给用户在进行滚动时带来一些困惑。

 

Real world examples 应用实例

Google Maps利用滚轮进行zoom in/out。
ACME MapperGoogle Maps的增强版//在chrome10下滚动无效
ImageFlow by Finn Rudolph

 

/** Event handler for mouse wheel event.
         *鼠标滚动事件
         */
        var wheel = function(event) {
            var delta = 0;
            if (!event) /* For IE. */
                event = window.event;
            if (event.wheelDelta) { /* IE/Opera. */
                delta = event.wheelDelta / 120;
            } else if (event.detail) {
                /** Mozilla case. */
                /** In Mozilla, sign of delta is different than in IE.
                 * Also, delta is multiple of 3.
                 */
                delta = -event.detail / 3;
            }
            /** If delta is nonzero, handle it.
             * Basically, delta is now positive if wheel was scrolled up,
             * and negative, if wheel was scrolled down.
             */
            if (delta)
                handle(delta);
            /** Prevent default actions caused by mouse wheel.
             * That might be ugly, but we handle scrolls somehow
             * anyway, so don't bother here..
             */
            if (event.preventDefault)
                event.preventDefault();
            event.returnValue = false;
        }

        /** Initialization code. 
         * If you use your own event management code, change it as required.
         */
        if (window.addEventListener) {
            /** DOMMouseScroll is for mozilla. */
            window.addEventListener('DOMMouseScroll', wheel, false);
        }
        /** IE/Opera. */
        window.onmousewheel = document.onmousewheel = wheel;

        /** This is high-level function.
         * It must react to delta being more/less than zero.
         */
        var handle = function(delta) {
            var random_num = Math.floor((Math.random() * 100) + 50);
            if (delta < 0) {
                // alert("鼠标滑轮向下滚动：" + delta + "次！"); // 1
                $("btn_next_pic").onclick(random_num);
                return;
            } else {
                // alert("鼠标滑轮向上滚动：" + delta + "次！"); // -1
                $("btn_last_pic").onclick(random_num);
                return;
            }
        }

 

Reference [参考]

　　1.http://blog.163.com/jinlu_hz/blog/static/113830152201122911356714/

　　2.http://qiaolevip.iteye.com/blog/1673396