以下のコードを参照してください。
$(this.element).on("mousewheel", this.chartMouseWheel);
chartMouseWheel:function(e) {
if(e.originalEvent.wheelDelta /120 > 0) {
alert('scrolling up !');
}
else{
alert('scrolling down !');
}
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
},
このイベントはIEで適切にトリガーされますが、Firefoxではトリガーされません。
Firefoxはバージョン3の時点で「マウスホイール」を認識しません。Firefoxの代わりに「DOMMouseScroll」を使用する必要があります。
これを確認してください: http://www.javascriptkit.com/javatutors/onmousewheel.shtml
これは2017年で、正しい答えは次のとおりです。
$(window).on('wheel', function(event){
// deltaY obviously records vertical scroll, deltaX and deltaZ exist too
if(event.originalEvent.deltaY < 0){
// wheeled up
}
else {
// wheeled down
}
});
現在のFirefox 51、Chrome 56、IE9 +で動作します
注:デルタの値は、ブラウザーとユーザー設定によって異なります。
wheel
イベントを使用します。このページは、古いブラウザ用のポリフィルも提供します https://developer.mozilla.org/en-US/docs/Web/Events/wheel
バドリは正しい、Firefoxの代わりに「DOMMouseScroll」を使用する必要があります。これに加えて、デルタでは、event.originalEvent.wheelDeltaの代わりにevent.originalEvent.detailを使用する必要があります。ダウンの場合、event.originalEvent.detailは正の値を与え、event.originalEvent.wheelDeltaは負の値を与え、逆も同様です。
$(stage.content).on('mousewheel DOMMouseScroll', zoomHelper.zoom);
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
if (event.originalEvent.detail > 0) {
//scroll down
delta = 0.2;
} else {
//scroll up
delta = 0;
}
} else {
if (event.originalEvent.wheelDelta < 0) {
//scroll down
delta = 0.2;
} else {
//scroll up
delta = 0;
}
}
JSFiddle(IE 11、Firefox 33およびChrome 38、他のブラウザーをテストしませんでした)で動作します): http://jsfiddle.net/rpaul/ckwu7u86/3 /
または、単に jquery-mousewheel jQueryプラグインを使用します。
これはSafari、Chrome、Firefoxで動作するようです(IEでテストしていません)。
// For Chrome
window.addEventListener('mousewheel', mouseWheelEvent);
// For Firefox
window.addEventListener('DOMMouseScroll', mouseWheelEvent);
function mouseWheelEvent(e) {
var delta = e.wheelDelta ? e.wheelDelta : -e.detail;
console.log(delta);
}
From: http://www.h3xed.com/programming/javascript-mouse-scroll-wheel-events-in-firefox-and-chrome