Question

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

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

    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。在return false下替换了setTimeout，所以我不会立即退出该函数。它-现在基于您的代码正常运行。

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>

.wheel事件|由于目标被视为被动，因此无法阻止被动事件侦听器中的Default

1 个答案: