javascript - eventos - mouseout jquery

Obtener eventos de rueda del mouse en jQuery?

Question

¿Hay alguna manera de obtener los eventos de la rueda del mouse (sin hablar de eventos de scroll ) en jQuery?

Answer 1

A partir de ahora en 2017, puedes escribir

$(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 con Firefox 51 actual, Chrome 56, IE9 +

Answer 2

Aquí hay una solución vainilla. Se puede usar en jQuery si el evento pasado a la función es event.originalEvent que jQuery pone a disposición como propiedad del evento jQuery. O si dentro de la función de callback debajo agregamos antes de la primera línea: event = event.originalEvent; .

Este código normaliza la velocidad / cantidad de la rueda y es positivo para lo que sería un desplazamiento hacia adelante en un mouse típico y negativo en un movimiento hacia atrás de la rueda del mouse.

Demostración: http://jsfiddle.net/BXhzD/

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);

También hay un complemento para jQuery, que es más detallado en el código y algo de azúcar adicional: https://github.com/brandonaaron/jquery-mousewheel

Answer 3

El complemento que @DarinDimitrov publicó, jquery-mousewheel , está roto con jQuery 3+ . Sería más recomendable usar jquery-wheel que funciona con jQuery 3+.

Si no desea ir a la ruta jQuery, MDN le advierte sobre el uso del evento mousewheel , ya que no es estándar y no es compatible en muchos lugares. En su lugar, dice que https://developer.mozilla.org/en-US/docs/Web/Events/wheel medida que obtiene mucha más especificidad sobre exactamente qué significan los valores que está obteniendo. Es compatible con la mayoría de los principales navegadores.

Answer 4

Esto funcionó para mí :)

 //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;
});

de

Answer 5

Esto funciona en las últimas versiones de IE, Firefox y Chrome.

$(document).ready(function(){
$(''#whole'').bind(''DOMMouseScroll mousewheel'', function(e){
if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
alert("up");
}
else{
alert("down");
}
});
});

Answer 6

Estuve atrapado en este problema hoy y encontré que este código funciona bien para mí

$(''#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'');
}
});

Answer 7

Hay un plugin que detecta la rueda del mouse hacia arriba / abajo y la velocidad sobre una región.

Answer 8

La vinculación a mousewheel y DOMMouseScroll terminó funcionando muy bien para mí:

$(window).bind(''mousewheel DOMMouseScroll'', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
}
else {
// scroll down
}
});

Este método funciona en IE9 +, Chrome 33 y Firefox 27.

Editar - Mar 2016

Decidí volver a tratar este tema ya que ha pasado un tiempo. La página MDN para el evento de desplazamiento tiene una excelente manera de recuperar la posición de desplazamiento que hace uso de requestAnimationFrame , que es muy preferible a mi método de detección anterior. Modifiqué su código para proporcionar una mejor compatibilidad además de la dirección y posición de desplazamiento:

(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;
});
})();

Consulte el seguimiento de desplazamiento de Pen Vanilla JS por Jesse Dupuy ( @blindside85 ) en CodePen .

Este código actualmente funciona en Chrome v50, Firefox v44, Safari v9, and IE9+

Referencias

• https://developer.mozilla.org/en-US/docs/Web/Events/scroll
• https://developer.mozilla.org/en-US/docs/Web/Events/wheel

Answer 9

Las respuestas sobre el evento "mousewheel" se refieren a un evento en desuso. El evento estándar es simplemente "rueda". Ver https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

Answer 10

Si se utiliza el mencionado plugin jquery mousewheel , entonces, ¿qué tal utilizar el segundo argumento de la función del controlador de eventos - delta :

$(''#my-element'').on(''mousewheel'', function(event, delta) {
if(delta > 0) {
console.log(''scroll up'');
}
else {
console.log(''scroll down'');
}
});

Answer 11

Tengo el mismo problema recientemente donde $(window).mousewheel volvía undefined

Lo que hice fue $(window).on(''mousewheel'', function() {});

Además de procesarlo, estoy usando:

function (event) {
var direction = null,
key;
if (event.type === ''mousewheel'') {
if (yourFunctionForGetMouseWheelDirection(event) > 0) {
direction = ''up'';
} else {
direction = ''down'';
}
}
}

Answer 12

mi combinación se ve así. se desvanece y se desvanece en cada desplazamiento hacia abajo / arriba. de lo contrario, tiene que desplazarse hacia arriba hasta el encabezado, para desvanecer el encabezado en.

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);
}
});

el anterior no está optimizado para touch / mobile, creo que este lo hace mejor para todos los dispositivos móviles:

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;
});

Answer 13

usa este código

 knob.bind(''mousewheel'', function(e){
if(e.originalEvent.wheelDelta < 0) {
moveKnob(''down'');
} else {
moveKnob(''up'');
}
return false;
});

Answer 14

​$(document).ready(function(){
$(''#foo'').bind(''mousewheel'', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
console.log(''scrolling up !'');
}
else{
console.log(''scrolling down !'');
}
});
});