ホイールスクロールベースのイベントを高速化する

Question

ホイールスクロール時に小さなアイコンを進めるカスタムスクリプトがあります。それはうまくいきますが、素早く私が望むように要素を進めているわけではありません。私は要素（ピル）がホイールのスクロールごとに動く距離を増やしたいと思います。これを容易にするためにコードを変更するにはどうすればよいですか？どんな洞察もありがとう。コード：イベントリスナーへのフォローを追加

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

てみてください。..

キャプチャ：真、 パッシブ：真

パッシブ・イベント・リスナーはせ、あなたがイベントに未解約ハンドラをアタッチすることができますブラウザーはイベントリスナーを中心に最適化します。ブラウザは、たとえば、イベントハンドラの実行が完了するのを待つことなく、ネイティブスピードでスクロールし続けることができます。主に使用されている。おそらく何

使用

：

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

あなたはこれでそれを交換する必要があります：

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

alligator dot io