down - scrolltop javascript
mousewheel, wheel y DOMMouseScroll en JavaScript (2)
Puede presentar soporte de detección de ruedas como este:
var wheelEvt = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
"DOMMouseScroll"; // let''s assume that remaining browsers are older Firefox
luego puede adjuntar su controlador de eventos de la siguiente manera:
$("#wrapper").on(wheelEvt, function(e) {
console.log(e.deltaY);
if (e.deltaY > 0) {
$("#Left").click();
} else if (e.deltaY <= 0) {
$("#Right").click();
}
});
o si usa vanilla js:
document.getElementById("wrapper").addEventListener(wheelEvt, function(e) {
console.log(e.deltaY);
if (e.deltaY > 0) {
$("#Left").click();
} else if (e.deltaY <= 0) {
$("#Right").click();
}
}, false);
referencia: https://developer.mozilla.org/en-US/docs/Web/Events/wheel
DOMMouseScroll
solo funciona para Firefox.
wheel
parece funcionar tanto para Firefox como para Chrome. ¿Que es esto? No he encontrado documentos en este.
mousewheel
no funciona para Firefox.
¿Cómo debo usarlos para obtener la mejor compatibilidad con el navegador?
Ejemplo dado:
document.addEventListener(''ScrollEvent'', function(e){
DoSomething();
});
Sugeriría que los tres sean utilizados al mismo tiempo para cubrir todos los navegadores.
Notas:
En las versiones de Firefox donde se
DOMMouseScroll
eventoswheel
yDOMMouseScroll
, necesitamos una forma de indicar al navegador que ejecute solowheel
y no ambos. Algo como lo siguiente:if ("onwheel" in window) ...
Sin embargo, la comprobación anterior, en el caso de
IE9
eIE10
, fallará, porque aunque estos navegadores admiten el eventowheel
, no tienen el atributoonwheel
en los elementos DOM. Para contrarrestar eso, podemos usar una bandera como se muestra más adelante.Creo que el número devuelto por
e.deltaY
,e.wheelDelta
ye.detail
no es útil, aparte de ayudarnos a determinar la dirección del desplazamiento, por lo que en la solución debajo de-1
y1
será devuelto.
Retazo:
/* The flag that determines whether the wheel event is supported. */
var supportsWheel = false;
/* The function that will run when the events are triggered. */
function DoSomething (e) {
/* Check whether the wheel event is supported. */
if (e.type == "wheel") supportsWheel = true;
else if (supportsWheel) return;
/* Determine the direction of the scroll (< 0 → up, > 0 → down). */
var delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 10) || 1;
/* ... */
console.log(delta);
}
/* Add the event listeners for each event. */
document.addEventListener(''wheel'', DoSomething);
document.addEventListener(''mousewheel'', DoSomething);
document.addEventListener(''DOMMouseScroll'', DoSomething);
Aunque han pasado casi 3 años desde la publicación de la pregunta, creo que las personas que se topen con ella en el futuro se beneficiarán de esta respuesta, así que siéntase libre de sugerir / mejorarla. 😊