javascript - 滚动时垂直全高 div 之间的动画切换

Question

我在一页中有三个 div，每个高度为 100vh。所以我想在它们之间自动切换，当用户滚动(向上或向下)时将被激活。我已经用 scrollTop() 函数编写了条件。

例如:

if($("#first").scrollTop() > 10){ /*go to next div automatically*/ }

它对第一个 div 非常有效，但不可能再次滚动到顶部，因为第一个条件总是为真。我不知道。请帮帮我。

Answer 1

这是一个小代码片段，可以帮助您完成您正在尝试做的事情。基本上，这种功能可能有不同的实现。尝试阅读我在代码中添加的注释，尝试一下代码片段，理解逻辑并使其变得更好。如果您有任何问题，请告诉我。

$(document).ready(function() {
  
  /* define some helper variables */
  var 
    /* body jQuery wrapper */
    body = $('html, body'),
    
    /* window jQuery wrapper */
    win = $(window),
    
    /* divs jQuery wrapper */
    divs = $('.view'),
    
    /* divs length, which we will use to determine if we are on the last/first div */
    divsLen = divs.length - 1,
    
    /* Last scroll position which will help us to determine which is the scroll direction */
    lastScroll = 0,
    
    /* Currently showing div's index */
    divIndex = 0,
    
    /* Flag to determine if scrolling animation is active */
    scrolling = false;

  /* Do the magic */
  win.on('scroll', _handleScroll);

  function _handleScroll(e) {
    
    /* Do nothing if currently running animation is not finished */
    if (scrolling) {
      return false;
    }

    scrolling = true;

    /* Determine scroll direction and the div to which we will scroll */
    if (win.scrollTop() > lastScroll) {
      /* scrolling down */
      if (divIndex < divsLen) {
        /* increment divIndex so we scroll to next div */
        divIndex++;
      } else {
        /* return if we are on the last element to prevent flicker animation */
        scrolling = false;
        return false;
      }
    } else {
      /* scrolling up */
      if (divIndex > 0) {
        /* decrement divIndex so we scroll to previous div */
        divIndex--;
      } else {
        /* return if we are on the first element to prevent flicker animation */
        scrolling = false;
        return false;
      }
    }
    
    /* Process the animation */
    body.stop().animate({
      scrollTop: divs.eq(divIndex).offset().top
    }, 500, function() {
    
      /* Use a small timeout before setting scrolling = false, otherwise scroll event is triggered immediately and code is not working fine */
      setTimeout(function() {
      
        /* reset the scrolling flag */
        scrolling = false;
        
        /* save last scroll position */
        lastScroll = win.scrollTop();
        
      }, 50);
    });
  }

});

*{margin:0; padding:0;}
.view {height:100vh; display: flex; align-items: center; justify-content: center;}
.view span {color: white; font-size: 25px; font-family: arial; font-weight: bold;}
#first {background-color: blue;}
#second {background-color: black;}
#third {background-color: green;}
#fourth {background-color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="first" class="view">
  <span>First</span>
</div>

<div id="second" class="view">
  <span>Second</span>
</div>

<div id="third" class="view">
  <span>Third</span>
</div>

<div id="fourth" class="view">
  <span>Fourth</span>
</div>