Question

我有一些代码可以将下一个div滑入鼠标滚轮视图并隐藏上一个div。问题是鼠标滚动过于敏感，并且在使用滚动时会滚动多次。有没有办法使滚动动作只触发一次？

请参见下面的示例说明，滚动至底部的div4，然后再次滚动至顶部。

window.addEventListener('wheel', function(e) {
  if (e.deltaY < 0) {
    if ($('#div1').is(':visible')) {
      $('#div1').hide("slide", {
        direction: "up"
      }, 500);
      
      $('#div2').show("slide", {
        direction: "down"
      }, 500);
    } else if ($('#div2').is(':visible')) {
      $('#div2').hide("slide", {
        direction: "up"
      }, 500);
      
      $('#div3').show("slide", {
        direction: "down"
      }, 500);
    } else if ($('#div3').is(':visible')) {
      $('#div3').hide("slide", {
        direction: "up"
      }, 500);
      
      $('#div4').show("slide", {
        direction: "down"
      }, 500);
    }
  }

  if (e.deltaY > 0) {
    if ($('#div2').is(':visible')) {
      $('#div2').hide("slide", {
        direction: "down"
      }, 500);
      
      $('#div1').show("slide", {
        direction: "up"
      }, 500);
    } else if ($('#div3').is(':visible')) {
      $('#div3').hide("slide", {
        direction: "down"
      }, 500);
      
      $('#div2').show("slide", {
        direction: "up"
      }, 500);
    } else if ($('#div4').is(':visible')) {
      $('#div4').hide("slide", {
        direction: "down"
      }, 500);
      
      $('#div3').show("slide", {
        direction: "up"
      }, 500);
    }
  }
});

#div1 {
  height: 100px;
  background: #f00;
  color: #fff;
}

#div2 {
  display: none;
  height: 100px;
  background: #394;
  color: #fff;
}

#div3 {
  display: none;
  height: 100px;
  background: #859;
  color: #fff;
}

#div4 {
  display: none;
  height: 100px;
  background: #487;
  color: #fff;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
<div id="div4">div 4</div>

Answer 1

您可以添加一些标志来控制是否有动画。动画开始时，将此变量设置为true，完成动画后将其设置为false。在事件监听器中，添加对此变量的检查，如果它是true，则什么也不做。

我对您的示例做了一些升级，请查看：

let active = 1;
let isAnimating = false;
let duration = 500;

function onComplete() {
  isAnimating = false;
}

window.addEventListener('wheel', function(e) {
  if (isAnimating) return; // If element is animating then do nothing, just return
  let $active = $('#div' + active);
  let nextActiveIndex = active + 1;
    
  if (e.deltaY < 0) {
    nextActiveIndex = active + 1;
  } else {
    nextActiveIndex = active - 1;
  }
  
  let $nextActiveDiv = $("#div" + nextActiveIndex);
  
  if (!$nextActiveDiv.length) return; // If there is no element, just return
  
  isAnimating = true; // Begin animation, turn to true
  
  $active.hide('slide', {direction: 'up'}, duration, onComplete);
  $nextActiveDiv.show('slide', {direction: 'down'}, duration, onComplete);
  
  active = nextActiveIndex; // Increase or decrease active 
});

#div1 {
  height: 100px;
  background: #f00;
  color: #fff;
}

#div2 {
  display: none;
  height: 100px;
  background: #394;
  color: #fff;
}

#div3 {
  display: none;
  height: 100px;
  background: #859;
  color: #fff;
}

#div4 {
  display: none;
  height: 100px;
  background: #487;
  color: #fff;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
<div id="div4">div 4</div>

使滚轮事件仅滚动一次

1 个答案: