down - scrolltop javascript

mousewheel, wheel y DOMMouseScroll en JavaScript

Question

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

Answer 1

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

Answer 2

Sugeriría que los tres sean utilizados al mismo tiempo para cubrir todos los navegadores.

Notas:

1. En las versiones de Firefox donde se DOMMouseScroll eventos wheel y DOMMouseScroll , necesitamos una forma de indicar al navegador que ejecute solo wheel y no ambos. Algo como lo siguiente: if ("onwheel" in window) ...
   

2. Sin embargo, la comprobación anterior, en el caso de IE9 e IE10 , fallará, porque aunque estos navegadores admiten el evento wheel , no tienen el atributo onwheel en los elementos DOM. Para contrarrestar eso, podemos usar una bandera como se muestra más adelante.

3. Creo que el número devuelto por e.deltaY , e.wheelDelta y e.detail no es útil, aparte de ayudarnos a determinar la dirección del desplazamiento, por lo que en la solución debajo de -1 y 1 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. 😊