событие колеса PreventDefault не отменяет событие колеса - PullRequest
Новая
       41

событие колеса PreventDefault не отменяет событие колеса

4 голосов
/ 23 сентября 2019

Я хотел бы получить только одно событие для каждого события прокрутки

Я пробую этот код, но он выдает «колесо» столько раз, сколько событие колеса вызывается.Любая помощь?Спасибо 

window.addEventListener("wheel",
    (e)=> {
        console.log("wheel");
        e.preventDefault();
    },
    {passive:false}
    );

Вариант использования (редактировать) Я хочу разрешить прокрутку только от страницы к странице - с анимацией при прокрутке.Как только я обнаружу событие onwheel, я бы хотел остановить его до завершения анимации, в противном случае предыдущее onwheel продолжает срабатывать, и оно рассматривается как новое событие, поэтому переход на следующую целевую страницу

Ответы [ 3 ]

1 голос
/ 27 сентября 2019

Это довольно простая проблема, хранить в любом месте последнее направление и выполнять ваш код: 

direction = '';
window.addEventListener('wheel',  (e) => {
    if (e.deltaY < 0) {
      //scroll wheel up
      if(direction !== 'up'){
        console.log("up");
        direction = 'up';
      }
    }
    if (e.deltaY > 0) {
      //scroll wheel down
      if(direction !== 'down'){
        console.log("down");
        direction = 'down';
      }
    }
  });

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

Регулирование

Регулирование обеспечивает максимальное количество раз, которое функция может быть вызвана в течение долгого времени.Как и в «выполнять эту функцию не чаще, чем раз в 100 миллисекунд».

Debouncing

Debouncing обеспечивает, что функция не будет вызываться снова доопределенное количество времени прошло без его вызова.Как в «выполнить эту функцию, только если прошло 100 миллисекунд без ее вызова.

В вашем случае, возможно, debouncing - лучший вариант.

Временная блокировка прокрутки браузера 

$('#test').on('mousewheel DOMMouseScroll wheel', function(e) {
    e.preventDefault();
    e.stopPropagation();

    return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
  <h1>4</h1>
  <h1>5</h1>
  <h1>6</h1>
  <h1>7</h1>
  <h1>8</h1>
  <h1>9</h1>
  <h1>10</h1>
</div>
0 голосов
/ 23 сентября 2019

У вас почти это было, но вам нужно обернуть свой код в функцию.Я добавил несколько маленьких кусочков, чтобы вы могли различать вверх и вниз:) 

//scroll wheel manipulation
  window.addEventListener('wheel', function (e) {
    //TODO add delay
    if (e.deltaY < 0) {
      //scroll wheel up
      console.log("up");
    }
    if (e.deltaY > 0) {
      //scroll wheel down
      console.log("down");
    }
  });

Как это работает?

(e) = Это просто событие, функциясрабатывает, когда вы прокручиваете вверх и вниз, но без события функции он просто не знает, что делать!Обычно люди ставят « событие », но это лениво.

deltaY = Это функция прокрутки колеса, она просто обеспечивает прокрутку вдоль оси Y.Это стандартная встроенная функция, к которой нет необходимости добавлять внешние переменные.

Дополнительно 

setTimeout

Вы можете добавить это.В операторах if @Lonnie Best предложил

0 голосов
/ 23 сентября 2019

Вы можете установить минимальное количество времени, которое должно пройти, прежде чем вы сочтете, что дополнительное событие прокрутки является действующим.

Например, ниже, между событиями прокрутки должно пройти 3 секунды, прежде чем console.log("wheel") будет запущен снова:

function createScrollEventHandler(milliseconds)
{
  let allowed = true;
  return (event)=>
  {
        event.preventDefault();
        if (allowed)
        {
          console.log("wheel");
          allowed = false;
          setTimeout(()=>
          {
            allowed = true;
          },milliseconds);
        }  
  }
}
let scrollEventHandler = createScrollEventHandler(3000); // 3 seconds
window.addEventListener("wheel",scrollEventHandler);
...