[removed] scroll from one div to the other when sc

问题:

I want to be able, when scrolling down, to go directly to the next div, and when scrolling up, to go directly to the previous div. Here are my files with an example with two divs:

$(document).ready(function() {
  var lastScrollTop = 0;

  function findPos(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
      do {
        curtop += obj.offsetTop;
      } while (obj = obj.offsetParent);
      return [curtop];
    }
  }

  $(window).scroll(function(event) {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
      $('html, body').animate({
        scrollTop: $("#space_od").offset().top
      }, 500);
    } else {
      $('html, body').animate({
        scrollTop: $("#black_hole").offset().top
      }, 500);
    }
    lastScrollTop = st;
  });
});

body {
  padding: 0;
  margin: 0;
}

#black_hole {
  background-image: url("black_hole.jpg");
  background-position: center;
  display: block;
  height: 100vh;
  width: 100%;
}

#space_od {
  background-image: url("2001.png");
  background-position: center;
  display: block;
  height: 100vh;
  width: 100%;
}

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

It seems to work fine when scrolling down the first time, but not when scrolling up, it seems to move a few pixels and then stop. Any ideas?

回答1:

scrollTo is a class to add to the divs you need to scroll to:

<div id="black_hole" class="scrollTo">

</div>
<div id="space_od" class="scrollTo">

</div>

Js

var scrolling = false;
var currentPos = 0;

    function scrollUp(){
        if(!scrolling && currentPos > 0 ){
            scrolling=true;
            currentPos --;
            var scrollToElement = $('.scrollTo')[currentPos];

            $('html, body').animate({
                scrollTop: $(scrollToElement).offset().top
            }, 500, function(){
                scrolling = false;
            });      
        }
    }   

    function scrollDown(){   
        if(!scrolling && currentPos < $('.scrollTo').length-1  ){
            scrolling=true;
            currentPos ++;
            var scrollToElement = $('.scrollTo')[currentPos];

            $('html, body').animate({
                scrollTop: $(scrollToElement).offset().top
            }, 500,function(){
                scrolling = false;
            }); 
        }
    }    

    $(document).ready(function() {

        // Get the current position on load

        for( var i = 0; i < $('.scrollTo').length; i++){
            var elm = $('.scrollTo')[i];

            if( $(document).scrollTop() >= $(elm).offset().top ){
                currentPos = i;
            }
        }

        $(document).bind('DOMMouseScroll', function(e){
            if(e.originalEvent.detail > 0) {
                scrollDown();
            }else {
                scrollUp();   
            }
            return false;
        });

        $(document).bind('mousewheel', function(e){
            if(e.originalEvent.wheelDelta < 0) {
                scrollDown();
            }else {
                scrollUp();     
            }
            return false;
        });
    });