スクロールバーなしでマウスホイールの動きを確認する方法は?
$(document).mousewheel(function() {
clicker.html("a7a");
});
このjQueryプラグインを使用することを強くお勧めします: [〜#〜] plugin [〜#〜]
プラグインなしで、この例を試してください: [〜#〜] example [〜#〜]
HTML:
<div id='foo' style='height:300px; width:300px; background-color:red'></div>
Javascript:
$('#foo').bind('mousewheel', function(e) {
if(e.originalEvent.wheelDelta / 120 > 0) {
alert('up');
} else {
alert('down');
}
});
Divにはスクロールバーはありませんが、ホイールイベントが検出されます。
このコードを使用
$('#foo').bind('mousewheel DOMMouseScroll', function (event) {
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
//up
}
else {
//down
}
});
また、プラグイン(IE8、Chrome、Firefox、Safari、Operaなど)をまったく使用しない場合は、次のようにします。
if (document.addEventListener) {
document.addEventListener("mousewheel", MouseWheelHandler(), false);
document.addEventListener("DOMMouseScroll", MouseWheelHandler(), false);
} else {
sq.attachEvent("onmousewheel", MouseWheelHandler());
}
function MouseWheelHandler() {
return function (e) {
// cross-browser wheel delta
var e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
//scrolling down?
if (delta < 0) {
alert("Down");
}
//scrolling up?
else {
alert("Up");
}
return false;
}
}
生きている例: http://jsfiddle.net/CvCc6/1/
これは、ここで説明されている新しい「ホイール」イベントを使用した、@ Aaronの回答の更新です。 https://developer.mozilla.org/en-US/docs/Web/Events/wheel
$('#foo').on('wheel', function(e){
if(e.originalEvent.deltaY < 0) {
console.log('scrolling up !');
} else{
console.log('scrolling down !');
}
});
また、deltaX
を使用して水平スクロールを表示したり、deltaZ
を使用して3Dクレイジーなことが起こったりすることもあります。