événement roue javascript donnent des valeurs incohérentes

Question

je travaillais sur la fonctionnalité de zoom avec html/javascript/css
Je joint un écouteur d'événement wheel à mon div tag et console.log(event.wheelDelta)
Il fonctionne bien avec la souris. Le console.log donne des multiples positifs de 120 pour un zoom avant et négatif sinon

problème est avec pavé tactile

Le zoom geste, il ne donne pas des valeurs cohérentes. Il y a quelques -120 entre. Pour cette raison, le zoom est très approximatif.
Comment puis-je obtenir zooming lisse ou comment puis-je obtenir wheelDelta cohérentes avec les valeurs touchpad

Answer 1

event.wheelDelta n'est pas défini dans tous les navigateurs, dépréciée et ne doit plus été utilisé selon its Mozilla documention. Vous pouvez utiliser les valeurs event.deltaX et event.deltaY. Pour plus d'informations, veuillez vous référer au Mozilla wheel documentation.

J'ai testé le code suivant dans Google Chrome et Mozilla Firefox. Les valeurs sont très différentes. Google Chrome renvoie toujours event.deltaY la valeur 100 ou -100. Dans Mozilla Firefox, il renvoie toujours les valeurs 3 ou -3.

document.addEventListener('wheel', function(event) { 
    console.log(event.deltaX, event.deltaY); 
}); 

Je ne me fierais pas sur la valeur de la roue, mais plutôt écouter l'événement de défilement comme celui-ci est décrit sur le Mozilla scroll documentation:

var lastKnownScrollPosition = 0; 
var ticking = false; 

function doSomething(scrollPosition) { 
    console.log(scrollPosition); 
} 

window.addEventListener('scroll', function(e) { 
    lastKnownScrollPosition = window.scrollY; 
    if(!ticking) { 
     window.requestAnimationFrame(function() { 
      doSomething(lastKnownScrollPosition); 
      ticking = false; 
     }); 
    } 
    ticking = true; 
}); 

Answer 2

Utilisez event.wheelDeltaY ou event.deltaY
console.log(event.wheelDeltaY) pour la souris:
Pour le pavé tactile: Au lieu de -120 il donne 0. -120 qui apparaît dans la roueDelta est en réalité le résultat du défilement horizontal (wheelDeltaX). (Lorsque vous essayez de zoomer en utilisant pavé tactile, il peut y avoir un léger mouvement horizontal aussi)
pas de zoom quand c'est 0 et vous obtiendrez un zoom régulier et régulier!