.wheel 事件 |由于目标被视为被动，无法在被动事件侦听器中阻止默认值

Question

我正在使用js函数来降低滚动频率，chrome给出以下错误：

由于目标被视为被动，因此无法在被动事件侦听器中阻止默认。

    var scrollTimeout = 1;
    var throttle = 4500;
    var scrollMessage = function (message) {
        console.log(message);
    
    };
    
    $(window).bind('wheel', function () {
        if (scrollTimeout === 0) {
            return false;
            setTimeout(function () {
                console.log('Throttled scroll');
                scrollTimeout = 1;
            }, throttle);
        } else {
            scrollTimeout = 0;
            console.log('native scroll');
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

有什么可能的解决方案让它工作。

Answer 1

Chrome doesn't like 顶级元素上的自定义滚轮事件，如果未明确设置为活动，则忽略它们。 jQuery 还不允许你设置那些 event properties。

我已恢复使用普通 JavaScript，它允许您在事件选项上将被动标志设置为 false。

我在函数中加入了一个事件对象e，允许使用event.preventDefault。替换了setTimeout 下面的return false，所以我不会立即退出该函数。它 - 基于 - 现在可以正常运行您的代码。

var scrollTimeout = 1;
var throttle = 4500;
var scrollMessage = function(message) {
  console.log(message);

};

//since jQuery doesn't allow you to set the event's property to passive = false yet, revert to vanilla

document.addEventListener('wheel', function(e) {
  //added e as reference for the event object
  
  if (scrollTimeout === 0) {

    setTimeout(function() {
      console.log('Throttled scroll');
      scrollTimeout = 1;
    }, throttle);
    e.preventDefault(); //cancelling default action
    return false; // return false for safety
  } else {
    scrollTimeout = 0;
    console.log('native scroll');
  }
}, { passive: false });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>