scroll
jQueryでマウスホイールイベント(イベントについて話していない)を取得する方法はありますか?
$(el).on('input', ...
scroll
jQueryでマウスホイールイベント(イベントについて話していない)を取得する方法はありますか?
$(el).on('input', ...
回答:
$(document).ready(function(){
$('#foo').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
console.log('scrolling up !');
}
else{
console.log('scrolling down !');
}
});
});
DOMMouseScroll
あなたは、両方をリッスンするようにしなければならないので、イベントは、FFで使用されている.bind('DOMMouseScroll mousewheel') {
evetns developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/...
e.originalEvent.wheelDelta
FF23では未定義
両方に結合mousewheel
し、DOMMouseScroll
私のために本当によく働くことになりました。
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
}
else {
// scroll down
}
});
このメソッドは、IE9 +、Chrome 33、Firefox 27で機能します。
編集-2016年3月
しばらく前からこの問題を再検討することにしました。スクロールイベントのMDNページには、を使用するスクロール位置を取得する優れた方法がありrequestAnimationFrame
、これは以前の検出方法よりも非常に適しています。スクロールの方向と位置に加えて、互換性を高めるためにコードを変更しました。
(function() {
var supportOffset = window.pageYOffset !== undefined,
lastKnownPos = 0,
ticking = false,
scrollDir,
currYPos;
function doSomething(scrollPos, scrollDir) {
// Your code goes here...
console.log('scroll pos: ' + scrollPos + ' | scroll dir: ' + scrollDir);
}
window.addEventListener('wheel', function(e) {
currYPos = supportOffset ? window.pageYOffset : document.body.scrollTop;
scrollDir = lastKnownPos > currYPos ? 'up' : 'down';
lastKnownPos = currYPos;
if (!ticking) {
window.requestAnimationFrame(function() {
doSomething(lastKnownPos, scrollDir);
ticking = false;
});
}
ticking = true;
});
})();
このコードは現在動作しています Chrome v50, Firefox v44, Safari v9, and IE9+
参照:
「マウスホイール」イベントについての回答は、非推奨のイベントを指します。標準イベントは単に「ホイール」です。https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheelを参照してください
これは私のために働きました:)
//Firefox
$('#elem').bind('DOMMouseScroll', function(e){
if(e.originalEvent.detail > 0) {
//scroll down
console.log('Down');
}else {
//scroll up
console.log('Up');
}
//prevent page fom scrolling
return false;
});
//IE, Opera, Safari
$('#elem').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
//scroll down
console.log('Down');
}else {
//scroll up
console.log('Up');
}
//prevent page fom scrolling
return false;
});
これがバニラソリューションです。関数に渡されるイベントがevent.originalEvent
jQueryがjQueryイベントのプロパティとして利用できるようにする場合、jQueryで使用できます。または、callback
下の関数内の場合、最初の行の前に追加しますevent = event.originalEvent;
。
このコードは、ホイールの速度/量を正規化し、通常のマウスでは前方にスクロールする場合に正、マウスホイールの後方に移動すると負になります。
var wheel = document.getElementById('wheel');
function report(ammout) {
wheel.innerHTML = 'wheel ammout: ' + ammout;
}
function callback(event) {
var normalized;
if (event.wheelDelta) {
normalized = (event.wheelDelta % 120 - 0) == -0 ? event.wheelDelta / 120 : event.wheelDelta / 12;
} else {
var rawAmmount = event.deltaY ? event.deltaY : event.detail;
normalized = -(rawAmmount % 3 ? rawAmmount * 10 : rawAmmount / 3);
}
report(normalized);
}
var event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
window.addEventListener(event, callback);
jQueryのプラグインもあります。これはコードでより冗長で、いくつかの余分な砂糖があります:https : //github.com/brandonaaron/jquery-mousewheel
これは、各IE、Firefox、Chromeの最新バージョンで機能しています。
$(document).ready(function(){
$('#whole').bind('DOMMouseScroll mousewheel', function(e){
if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
alert("up");
}
else{
alert("down");
}
});
});
このコードを使用
knob.bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
moveKnob('down');
} else {
moveKnob('up');
}
return false;
});
私の組み合わせはこのようになります。スクロールダウン/アップするたびにフェードアウトおよびフェードインします。そうでない場合は、ヘッダーをフェードインするために、ヘッダーまで上にスクロールする必要があります。
var header = $("#header");
$('#content-container').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta > 0) {
if (header.data('faded')) {
header.data('faded', 0).stop(true).fadeTo(800, 1);
}
}
else{
if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);
}
});
上記のものはタッチ/モバイル用に最適化されていません、これはすべてのモバイルでより良いと思います:
var iScrollPos = 0;
var header = $("#header");
$('#content-container').scroll(function () {
var iCurScrollPos = $(this).scrollTop();
if (iCurScrollPos > iScrollPos) {
if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);
} else {
//Scrolling Up
if (header.data('faded')) {
header.data('faded', 0).stop(true).fadeTo(800, 1);
}
}
iScrollPos = iCurScrollPos;
});
@DarinDimitrovが掲載さというプラグインは、jquery-mousewheel
、jQueryの3+で破壊されます。jquery-wheel
jQuery 3+で動作するを使用することをお勧めします。
jQueryルートを使いmousewheel
たくない場合、MDNは非標準で多くの場所でサポートされていないイベントを使用することを強く警告します。代わりに、wheel
取得している値が何を意味するかについてより具体的に取得するために、イベントを使用する必要があると述べています。ほとんどの主要なブラウザでサポートされています。
上記のjqueryマウスホイールプラグインを使用している場合、イベントハンドラー関数の2番目の引数を使用するとどうなるでしょうかdelta
。
$('#my-element').on('mousewheel', function(event, delta) {
if(delta > 0) {
console.log('scroll up');
}
else {
console.log('scroll down');
}
});
最近$(window).mousewheel
戻ってきた場所で同じ問題が発生しました
undefined
私がしたことは $(window).on('mousewheel', function() {});
さらにそれを処理するために私は使用しています:
function (event) {
var direction = null,
key;
if (event.type === 'mousewheel') {
if (yourFunctionForGetMouseWheelDirection(event) > 0) {
direction = 'up';
} else {
direction = 'down';
}
}
}