时间戳

首页 > 解决方案 > 动画播放时禁用鼠标滚轮

javascript - 动画播放时禁用鼠标滚轮

问题描述

我正在尝试实现在向下/向上滚动时 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 代码笔链接

标签： javascriptscrollmousewheelgsap

解决方案

推荐阅读