Animated switch between vertical full-height divs when scroll

问题

I have three divs in one page with height 100vh each of them. So I want to make automatically switch between them, which will be activated when user scroll(up or down). I have written condition with scrollTop() function.

For example:

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

It works perfectly for first div, but scroll to top again impossible, because first condition always true. I haven't any idea. Please, help me.

回答1:

This is a small code snippet that can help you in what you are trying to do. Basically there could be different implementations of such a functionality. Try to read the comments that I put in the code, play with the snippet, understand the logic and make it better. Let me know if you have any trouble.

$(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>

来源：https://stackoverflow.com/questions/47132040/animated-switch-between-vertical-full-height-divs-when-scroll

标签

javascript

scrolltop