.wheel event |Невозможно предотвратитьDefault внутри прослушивателя пассивных событий из-за того, что цель рассматривается как пассивная

Question

Я использую функцию js для замедления частоты прокрутки, хром выдает следующую ошибку:

Невозможно предотвратить дефолт внутри прослушивателя пассивных событий из-за того, что цель рассматривается как пассивная.

    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 не любит пользовательских событий колесика на элементах верхнего уровня и игнорирует их, если они специально не установлены на активные.jQuery пока не позволяет вам установить эти свойства события .

Я вернулся к использованию обычного 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>