本文为归档内容,原始地址在 博客园.

最近正在做评论模块的image LazyLoad(图片资源延迟加载/按需加载),其中涉及到一些mouse scroll操作。老外的Mouse wheel programming in JavaScript一文,对我很有价值。——以下为翻译——本文有些信息可能已经过时,但是大部分知识点仍旧有用。Web应用日新月异,也越来越接近于桌面应用。功能上越来越强,比如drag本文要说的并不是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 pictured. Negative means down, positive up.于浏览器平台的差异性,我们只能够捕捉到滚动的差值(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