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

的复制信息

加快基于轮滚动的事件

1 个答案: