Existe uma maneira de obter os eventos da roda do mouse (sem falar sobre scroll
eventos) no jQuery?
$(el).on('input', ...
Existe uma maneira de obter os eventos da roda do mouse (sem falar sobre scroll
eventos) no jQuery?
$(el).on('input', ...
Respostas:
Há um plugin que detecta a roda do mouse para cima / baixo e a velocidade em uma região.
$(document).ready(function(){
$('#foo').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
console.log('scrolling up !');
}
else{
console.log('scrolling down !');
}
});
});
DOMMouseScroll
evento é usado no FF, então você tem que ouvir em ambos .bind('DOMMouseScroll mousewheel') {
evetns developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/...
e.originalEvent.wheelDelta
é indefinido em FF23
Vinculado a ambos mousewheel
e DOMMouseScroll
acabou funcionando muito bem para mim:
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
}
else {
// scroll down
}
});
Este método está funcionando no IE9 +, Chrome 33 e Firefox 27.
Editar - Mar 2016
Decidi revisitar esse problema, já faz um tempo. A página MDN para o evento de rolagem tem uma ótima maneira de recuperar a posição de rolagem usada requestAnimationFrame
, o que é altamente preferível ao meu método de detecção anterior. Modifiquei o código para oferecer melhor compatibilidade, além da direção e posição da rolagem:
(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;
});
})();
Este código está atualmente trabalhando em Chrome v50, Firefox v44, Safari v9, and IE9+
Referências:
A partir de agora em 2017, você pode escrever
$(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
}
});
Funciona com o Firefox 51, Chrome 56, IE9 + atual
As respostas que falam sobre o evento "mousewheel" referem-se a um evento descontinuado. O evento padrão é simplesmente "roda". Consulte https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel
Isso funcionou para mim :)
//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;
});
Aqui está uma solução de baunilha. Pode ser usado no jQuery se o evento passado para a função é o event.originalEvent
que o jQuery disponibiliza como propriedade do evento jQuery. Ou, se dentro da callback
função abaixo, adicionamos antes da primeira linha:event = event.originalEvent;
.
Esse código normaliza a velocidade / quantidade da roda e é positivo para o que seria uma rolagem para a frente em um mouse típico e negativo em um movimento da roda para trás do mouse.
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);
Há também um plug-in para jQuery, que é mais detalhado no código e um pouco mais de açúcar: https://github.com/brandonaaron/jquery-mousewheel
Isso está funcionando nas versões mais recentes do IE, Firefox e Chrome.
$(document).ready(function(){
$('#whole').bind('DOMMouseScroll mousewheel', function(e){
if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
alert("up");
}
else{
alert("down");
}
});
});
Eu estava preso nesta questão hoje e achei que esse código está funcionando bem para mim
$('#content').on('mousewheel', function(event) {
//console.log(event.deltaX, event.deltaY, event.deltaFactor);
if(event.deltaY > 0) {
console.log('scroll up');
} else {
console.log('scroll down');
}
});
use este código
knob.bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
moveKnob('down');
} else {
moveKnob('up');
}
return false;
});
minha combinação fica assim. desaparece e desaparece em cada rolagem para baixo / para cima. caso contrário, você precisará rolar até o cabeçalho para inserir o cabeçalho.
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);
}
});
o acima não é otimizado para touch / mobile, acho que esse é o melhor para todos os dispositivos móveis:
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;
});
O plugin que o @DarinDimitrov postou jquery-mousewheel
, está quebrado com o jQuery 3+ . Seria mais aconselhável usar o jquery-wheel
que funciona com o jQuery 3+.
Se você não deseja seguir a rota do jQuery, o MDN recomenda o uso do mousewheel
evento, pois ele não é padrão e não é suportado em muitos lugares. Em vez disso, diz que você deve usar o wheel
evento à medida que obtém muito mais especificidade sobre exatamente quais são os valores que você está recebendo. É suportado pela maioria dos principais navegadores.
Se você estiver usando o plug-in jquery mousewheel mencionado , que tal usar o segundo argumento da função manipulador de eventos - delta
:
$('#my-element').on('mousewheel', function(event, delta) {
if(delta > 0) {
console.log('scroll up');
}
else {
console.log('scroll down');
}
});
Eu tive o mesmo problema recentemente, onde
$(window).mousewheel
estava retornandoundefined
O que eu fiz foi $(window).on('mousewheel', function() {});
Além de processá-lo, estou usando:
function (event) {
var direction = null,
key;
if (event.type === 'mousewheel') {
if (yourFunctionForGetMouseWheelDirection(event) > 0) {
direction = 'up';
} else {
direction = 'down';
}
}
}