Accélération d'un événement basé sur un défilement de roues

Question

J'ai un script personnalisé qui fait avancer une petite icône sur le défilement de la roue. Cela fonctionne bien, mais ça ne fait pas progresser l'élément aussi rapidement que je le voudrais. Je voudrais augmenter la distance que l'élément (pilule) se déplace par rouleau de roue. Comment puis-je modifier le code pour faciliter cela? Merci pour tout commentaire. Code:

function wheel(e) { 
var modelContentWrapper = $('.model-content-wrapper'); 
var howModelWorks_steps = $('#howModelWorks_steps'); 

var currentIndex = $('.model-content.active', modelContentWrapper).index(); 
var $pill = $('.step_' + (currentIndex + 1) + ' > a.clickable-icon'); 
var $li = $('ul.steps li'); 
var $pillStep = ($li.width())/wheelSpeed; 
direction = 'right'; 
if ((e.wheelDelta && e.wheelDelta >= 0) || (e.detail && e.detail < 0)) { 
    wheelValue++; 
    if ((firstElement && parseInt($pill.css('margin-left')) > initialIconLeft) || (!firstElement)) { 
     $pill.css('margin-left', (parseInt($pill.css('margin-left')) - $pillStep) + 'rem'); 
    } 
    if (wheelValue >= wheelSpeed) { 
     wheelValue = wheelValue - wheelSpeed; 
     forceModelBackward(); 
    } 
    //direction = 'left'; 
} 
else { 
    wheelValue--; 
    //direction = 'right'; 
    if (!lastElement) { 
     $pill.css('margin-left', (parseInt($pill.css('margin-left')) + $pillStep) + 'rem'); 
    } 
    if (Math.abs(wheelValue) == wheelSpeed) { 
     wheelValue = wheelValue + wheelSpeed; 
     forceModelForward(); 
    } 
} 


//if (wheelValue > (wheelSpeed * 5) || wheelValue < (wheelSpeed * -5)) { 
if (stepsCounter == 1 || stepsCounter == 4) { 
    enableScroll(); 
} 
preventDefault(e); 
} 

Answer 1

Essayez d'ajouter le suivi à l'écouteur d'événement ..

capture: true, passif: true

écouteurs d'événements passifs vous permettent d'associer des gestionnaires non résiliables à des événements, laissant les navigateurs optimisent autour de vos écouteurs d'événement. Le navigateur peut alors, par exemple, continuer à défiler à la vitesse native sans attendre que vos gestionnaires d'événements aient fini de s'exécuter.

Utilisation

probablement ce qui est surtout utilisé:

// Really, if you're using wheel, you should instead be using the 'scroll' event, 
    // as it's passive by default. 
    document.addEventListener('wheel', (evt) => { 
     // ... do stuff with evt 
    }, true) 

Vous aurez besoin de le remplacer par ceci:

document.addEventListener('wheel', (evt) => { 
    // ... do stuff with evt 
}, { 
    capture: true, 
    passive: true 
}) 

Copié Informations alligator dot io