今、jQueryプラグインのTiny Scrollbarを読んでいるのですが、その中で、マウスホイールイベントをバインドしているところがあって、120やら3やらとなぜ定数がでてくるのか疑問になり、少し調査をすることに。
JavaScriptでマウスホイールイベントを扱い、スクロールも停止する方法で、Mouse wheel programming in 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; } 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; |
0 コメント:
コメントを投稿