jquery - 滚动时出现问题 - 不会完全禁用滚动

Question

我试图重新创建一个滚动行为，滚动被禁用，直到动画直接滚动到给定的点。类似于 http://alvarotrigo.com/fullPage/ 的东西(行为)，但我不想做整页滚动，而不是我希望滚动到网站的特定位置。

JS:

$(document).on("ready", function(){
  //Keep track of last scroll
  var lastScroll = 0;
  var scrollBlock = false;
  var myIndex = 0;
  var myPositions = [0,1000,2000,3000];


  $(window).scroll(function(event){
      console.log(scrollBlock);
      if(scrollBlock == false){
        scrollBlock = true;
        event.preventDefault();

        //Sets the current scroll position
        var st = $(this).scrollTop();
        //Determines up-or-down scrolling
        if (st > lastScroll){

           console.log("DOWN");
          $('body, html').animate({scrollTop: myPositions[myIndex+1]+'px'}, 2000, function(){
            console.log(myPositions[myIndex]);
            setTimeout(function(){
              console.log(st);
              lastScroll = $(window).scrollTop();
              scrollBlock = false;
             },200);
          });
           myIndex++;

        }
        else {

           console.log("UP");
          $('body, html').animate({scrollTop: myPositions[myIndex-1]+'px'}, 2000, function(){
            console.log(myPositions[myIndex]);
            setTimeout(function(){
              console.log(st);
              lastScroll = $(window).scrollTop();
              scrollBlock = false;
              //console.log(scrollBlock);
             },200);
          });
           myIndex--;
        }
        //Updates scroll position              
      }

  });
});

CSS:

body{height: 3000px; margin:0px}
.section{position: relative; overflow: hidden; height: 1000px}
.section1{background: red}
.section2{background: blue}
.section3{background: green}

HTML

<div class="section section1">Section 1</div>
<div class="section section2">Section 2</div>
<div class="section section3">Section 3</div>

这是codepen - http://codepen.io/anon/pen/bqpxf .

该脚本确定您是否向上/向下滚动。一旦触发滚动，默认的滚动行为应该停止，主体将滚动到特定部分。现在滚动有点“抖动”

你能帮我吗？

非常感谢

Answer 1

这是我为另一个关于滚动的问题做的例子，这里只有 2 个部分，但可能会有所帮助:

http://jsfiddle.net/zB5bc/8/

我正在使用:

body{
    overflow:hidden;
}