Отключить колесо мыши во время воспроизведения анимации - PullRequest
Новая
       98

Отключить колесо мыши во время воспроизведения анимации

1 голос
/ 10 июля 2020

Я пытаюсь добиться эффекта, что при прокрутке вниз / вверх анимация GSAP будет воспроизводиться и изменять содержимое раздела, и после того, как он перейдет в последний раздел, он будет отображать содержимое первого раздела и так далее, если прокрутить вверх по первому отображаемому контенту последний контент, но eventListener добавлен на колесе, потому что я хочу предотвратить прокрутку страницы, и вот в чем проблема. Если вы прокручиваете во время воспроизведения анимации, он будет отображать неправильный контент, и если вы прокрутите слишком много раз, увеличение / уменьшение приведет к остановке кода, поэтому мой вопрос: могу ли я отключить колесо мыши в то время, когда анимация воспроизводится? Пытался использовать preventDefault () для события, но это вообще не сработало. 

let tl = gsap.timeline();
let sections = document.getElementsByTagName('section');
let i = 0;

document.addEventListener('wheel', e => {
  if (checkUp(e) && i > 0) {
    console.log('UP');
    anim();
    setTimeout(up, 2000);
    console.log(i);
  } 
  else if (!(checkUp(e)) && i < 2) {
    console.log('Down');
    anim();
    setTimeout(down, 2000);
    console.log(i);
  }
  else if (!(checkUp(e)) && i === 2) {
    anim();
    setTimeout(last, 2000);
  }
  else if (checkUp(e) && i === 0) {
    anim();
    setTimeout(first, 2000);
  }
});


checkUp = (e) => {
    if (e.wheelDelta) {
      return e.wheelDelta > 0;
    }
    return e.deltaY < 0;
  } 

down = () => {
    sections[i].className = '';
    i++;
    sections[i].className = 'active';
}

up = () => {
    sections[i].className = '';
    i--;
    sections[i].className = 'active';
}

last = () => {
    sections[i].className = '';
    sections[0].className = 'active';
    i=0;
}

first = () => {
    sections[i].className = '';
    sections[2].className = 'active';
    i=2;
}

anim = () => {
    tl
        .to('section', 2, {opacity: 0})
        .to('section', 2, {opacity: 1});
}

Также мне очень жаль, если решение немного запуталось, но это было единственное, что пришло мне в голову. разум

CODEPEN ссылка codepen

...