title: JavaScript之鼠标滚动事件 categories:
/**
* 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;
<h3>Handler function 事件处理函数</h3>
<p><span>代码中的"handle"是用户的自定义函数,其中带了一个参数为delta。由</span><img src="https://adomas.org/javascript-mouse-wheel/deltas.png" alt="Deltas pictured. Negative means down, positive up."><span>于浏览器平台的差异性,我们只能够捕捉到滚动的差值(deltas),这个值是滚轮的变化值。</span><span>通常,你只能获取到delta的正值与负值,如左图所示。</span><span>如果delta是正值,滚动向前滚动,反之则为向后滚动。在许多应用中,向上滚动就是页面向上滚动。</span><span>你可能很疑惑,delta的实际值到底会是什么。实际上,上述代码其实是被调整过的,使得99%的情况下获取到的值要么-1要么就是+1。即时如此,如果在firefox下迅速滚动,会出现±3的情况。</span><a href="http://digg.com/programming/Mouse_wheel_programming_in_JavaScript#c2431219" rel="nofollow" target="_blank">Digg</a><span>上有人提出14的delta值,Geoffrey Kruse在他的pc上甚至得到了76的值。当然了,这也取决于鼠标敏感度的设置。firefox有一些微妙的现象:如果快速滚动的同时点击右键(原文 scrolling the wheel fast and then push the right mouse button for the menu),会报出例如30的delta值。</span><span>//不明白作者是如何触发这个操作的</span><a href="http://www.robsite.de/" rel="nofollow" target="_blank">Robert Gerlach</a><span>在Safari下做了一些测试:"只是滚动一圈的话,值为+-0.1,如果滚动地稍微快点的话(多滚动几圈),这个值也会变大。 这是因为Mac OS下有鼠标滚轮加速功能。滚动一次,浏览器滚动1像素,滚动3次,浏览器却滚动30像素"。同时他也对Camino(基于Gecko的内核引擎)进行研究:\与Safari相似(+- 0.3 to +-Infinity),虽然使用了与firefox相同的内核引擎,但结果这个delta值却只在+-2.666666里浮动,无论滚动速度如何。"</span><span>在此可以看一下</span><a href="http://adomas.org/javascript-mouse-wheel/test.html" rel="nofollow" target="_blank">测试页面A</a><span>与</span><a href="http://adomas.org/javascript-mouse-wheel/test2.html" rel="nofollow" target="_blank">测试页面B</a><span>。</span></p> <h3>Compatability 兼容性</h3> <p> <span>//作者在此感谢了许多人,不作翻译</span></p> <h3>Usability 可用性</h3> <p> <span>Few \don't"s——几个不要</span></p> <ul> <li>不要使用滚动进行一些不符合常理的操作,用户已经习惯用滚轮来作页面滚动之类的操作了。一些map应用使用滚轮进行缩放,这个操作符合用户的预期,大胆使用即可。</li> <li>不要强迫用户依赖滚轮进行操作。<span>//作者的意思</span><span>是</span><span>应该</span><span>提供一种可替换方案,使得在滚轮操作无效的情况下,应用程序仍旧可用</span></li> <li>尽量避免全局滚动条,这些滚动条可能会给用户在进行滚动时带来一些困惑。</li> </ul> <h3>Real world examples 应用实例</h3> <p> <a href="http://maps.google.com/" rel="nofollow" target="_blank">Google Maps</a><span>利用滚轮进行zoom in/out。</span><a href="http://mapper.acme.com/" rel="nofollow" target="_blank">ACME Mapper</a><span>Google Maps的增强版</span><span>//在chrome10下滚动无效</span><a href="http://imageflow.finnrudolph.de/" rel="nofollow" target="_blank">ImageFlow</a><span> by Finn Rudolph</span></p>/** 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;
}
}
<h3>Reference [参考]</h3>
<p> 1.http://blog.163.com/jinlu_hz/blog/static/113830152201122911356714/</p> <p> 2.http://qiaolevip.iteye.com/blog/1673396</p>