if else 语句中的多个 if else - 模拟滚动答案

【问题标题】：Multiple if else inside if else statements - Simulate a scrollif else 语句中的多个 if else - 模拟滚动
【发布时间】：2017-07-20 13:05:58
【问题描述】：

这个问题被问了很多次，但不知道为什么进展不顺利。我正在尝试模拟滚动以获得更多灵活性，但需要有很多条件。向上或向下渐变到淡入和淡出div 时，我得到一个鼠标滚轮事件。它正在使用一个 div，但无法使用更多。

我正在JSFiddle做一个演示

$('body').bind('mousewheel', function(e) {

  if ($('.ecampus').css('opacity') == '1') {
    if (e.originalEvent.wheelDelta / 120 > 0) {
            // TOP PAGE
    } else {
      $('.pegasebuzz').fadeOut();
      $('.notrecoin').fadeIn();
    }
  }

  else if ($('.pegasebuzz').css('opacity') == '1') {
    if (e.originalEvent.wheelDelta / 120 > 0) {
      $('.pegasebuzz').fadeOut();
      $('.ecampus').fadeIn();
    } else {
      $('.pegasebuzz').fadeOut();
      $('.notrecoin').fadeIn();
    }
  }

  else ($('.notrecoin').css('opacity') == '1') {
    if (e.originalEvent.wheelDelta / 120 > 0) {
      $('.notrecoin').fadeOut();
      $('.pegasebuzz').fadeIn();
    } else {
      // BOTTOM PAGE
    }
  }
});

【问题讨论】：

检查this
@Durga 我使用了一个类似的库（Scrollify.js），但我需要在没有真正的滚动条的情况下进行操作，因为在我的情况下它不能正常工作。我正在寻找带有鼠标滚轮的固定过渡。喜欢这个网站（除了第一页）：www.studio-dot.fr
@Leshautsdurant 检查我的答案，如果你觉得有用，请标记。

标签： javascript jquery if-statement mousewheel

【解决方案1】：

演示

var scroll=0;
$('body').bind('mousewheel', function(e) {
if(scroll<10) scroll++;
else{
  scroll=0;
  if ($('.ecampus').css('display') == 'block') {
  
    if (e.originalEvent.wheelDelta  < 0 ) {
			
      $('.ecampus').fadeOut();
      $('.pegasebuzz').fadeIn();
    } else {
      // TOP PAGE
    }
    return;
  }

  if ($('.pegasebuzz').css('display') == 'block') {
   if (e.originalEvent.wheelDelta  < 0) {
    $('.pegasebuzz').fadeOut();
     $('.notrecoin').fadeIn();
    } else {
    $('.pegasebuzz').fadeOut();
     $('.ecampus').fadeIn();
   }
   return;
  }

  if ($('.notrecoin').css('display') == 'block') {
   if (e.originalEvent.wheelDelta < 0) {
     // BOTTOM PAGE
  } else {
     
     $('.notrecoin').fadeOut();
     $('.pegasebuzz').fadeIn();
   }
   return;
 }
 
 }
});

body {
  margin: 0;
}

.ecampus {
  width: 100%;
  height: 100%;
  background: red;
  display: block;
  position: absolute;
}

.pegasebuzz {
  width: 100%;
  height: 100%;
  background: blue;
  display: none;
  position: absolute;
}

.notrecoin {
  width: 100%;
  height: 100%;
  background: yellow;
  display: none;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ecampus">
  E-CAMPUS
</div>
<div class="pegasebuzz">
  PEGASEBUZZ
</div>
<div class="notrecoin">
  NOTRE COIN
</div>

在每个鼠标滚轮事件上，它都会更改 div。你可以根据你的div来检查你想要添加多少滚动值。

【讨论】：

非常感谢杜尔加！无论如何，您知道我是否可以添加延迟以防止多次转换？
@Leshautsdurant 检查更新的 sn-p 添加变量以提供一些延迟。
这太棒了！非常感谢！

【解决方案2】：

$('body').bind('mousewheel', function(e) {
  if ($('.ecampus').css('display') == 'block') {
    if (e.originalEvent.wheelDelta / 120 > 0) {
      // TOP PAGE
    } else {
      $('.ecampus').fadeOut();
      $('.pegasebuzz').fadeIn();
      $('.notrecoin').fadeOut();
    }
  } else if ($('.pegasebuzz').css('display') == 'block') {
    if (e.originalEvent.wheelDelta / 120 > 0) {
      $('.pegasebuzz').fadeOut();
      $('.ecampus').fadeIn();
    } else {
      $('.notrecoin').fadeOut();
      $('.pegasebuzz').fadeOut();
      $('.notrecoin').fadeIn();
    }
  } else if ($('.notrecoin').css('display') == 'block') {
    if (e.originalEvent.wheelDelta / 120 > 0) {
      $('.ecampus').fadeOut();
      $('.notrecoin').fadeOut();
      $('.pegasebuzz').fadeIn();
    } else {}
  } else {}

});

body {
  margin: 0;
}

.ecampus {
  width: 100%;
  height: 100%;
  background: red;
  display: block;
  position: absolute;
}

.pegasebuzz {
  width: 100%;
  height: 100%;
  background: blue;
  display: none;
  position: absolute;
}

.notrecoin {
  width: 100%;
  height: 100%;
  background: yellow;
  display: none;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="ecampus">
  E-CAMPUS
</div>
<div class="pegasebuzz">
  PEGASEBUZZ
</div>
<div class="notrecoin">
  NOTRE COIN
</div>

【讨论】：

感谢Yogen的回答！