翻译 - JavaScript之鼠标滚动事件

本文地址：http://blog.163.com/jinlu_hz/blog/static/113830152201122911356714/
原文地址：http://adomas.org/javascript-mouse-wheel/
原文作者：unknown

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

——以下为翻译——

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

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

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

Annotated code 带注释的代码

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

1. /** 
2.  * This is high-level function. 
3.  * It must react to delta being more/less than zero. 
4.  */  
5. function handle(delta) {  
6.         if (delta < 0)  
7.         ...;  
8.         else  
9.         ...;  
10. }  
11.   
12. /**  
13.  * Event handler for mouse wheel event. 
14.  */  
15. function wheel(event){  
16.     var delta = 0;  
17.     if (!event) /* For IE. */   
18.         event = window.event;  
19.     if (event.wheelDelta) { /* IE/Opera. */  
20.         delta = event.wheelDelta / 120;  
21.         /**  
22.          * In Opera 9, delta differs in sign as compared to IE. 
23.          */  
24.         if (window.opera)   
25.             delta = -delta;  
26.     }  
27.     else   
28.       
29.         if (event.detail) {  
30.         /** Mozilla case. */  
31.         /** 
32.          * In Mozilla, sign of delta is different than in IE. 
33.          * Also, delta is multiple of 3. 
34.          */  
35.             delta = -event.detail / 3;  
36.         }  
37.     /**  
38.      * If delta is nonzero, handle it. 
39.      * Basically, delta is now positive if wheel was scrolled up, 
40.      * and negative, if wheel was scrolled down. 
41.      */  
42.     if (delta)   
43.         handle(delta);  
44.     /**  
45.      * Prevent default actions caused by mouse wheel. 
46.      * That might be ugly, but we handle scrolls somehow 
47.      * anyway, so don't bother here.. 
48.      */  
49.     if (event.preventDefault)   
50.         event.preventDefault();  
51.     event.returnValue = false;  
52. }  
53.   
54.   
55. /**  
56.  * Initialization code. 
57.  * If you use your own event management code, change it as required. 
58.  */  
59. if (window.addEventListener)   
60.     /** DOMMouseScroll is for mozilla. */  
61.     window.addEventListener('DOMMouseScroll', wheel, false);  
62. /** IE/Opera. */  
63. 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

——翻译结束——
2011-03-29 11:38:51