Javascript：滚动时从一个div滚动到另一个div？ [英] Javascript: scroll from one div to the other when scrolling?

问题描述

我希望能够在向下滚动时直接转到下一个div，并在滚动时直接转到前一个div。
这里是我的两个div的示例文件：

data-console =truedata-babel =false>

  body {padding：0; margin：0;}＃black_hole {background-image：url（black_hole.jpg）; background-position：center;显示：块;身高：100vh; width：100％;}＃space_od {background-image：url（2001.png）; background-position：center;显示：块;身高：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>

$ b

它在第一次向下滚动时似乎可以正常工作，但在滚动时不会滚动，它似乎移动了几个像素，然后停止。任何想法？

解决方案

scrollTo 是要添加到div的类你需要滚动到：

 < div id =black_holeclass =scrollTo> 
 
< / div> 
< div id =space_odclass =scrollTo> 
 
< / div> 
  

Js

  var scrolling = false; 
 var currentPos = 0; 
 $ b函数scrollUp（）{
 if（！scrolling&& currentPos> 0）{
 scrolling = true; 
 currentPos  - ; 
 var scrollToElement = $（'。scrollTo'）[currentPos]; 
 $ b $（'html，body'）。animate（{
 scrollTop：$（scrollToElement）.offset（）。top 
}，500，function（）{
 scrolling = false; 
}）; 
 
 
 
函数scrollDown（）{
 if（！scrolling&& amp; currentPos< $（'。scrollTo'）。length-1） {
 scrolling = true; 
 currentPos ++; 
 var scrollToElement = $（'。scrollTo'）[currentPos]; 
 $ b $（'html，body'）。animate（{
 scrollTop：$（scrollToElement）.offset（）。top 
}，500，function（）{
 scrolling = false; 
}）; 
 
 
 
 $（document）.ready（function（）{
 
 //获取加载时的当前位置
 
 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假; 
}）; 
}）; 
  

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?

解决方案

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;
        });
    });

这篇关于Javascript：滚动时从一个div滚动到另一个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！