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。

脚本确定您是否向上/向下滚动。触发滚动后，应停止默认滚动行为，并且正文将滚动到特定部分。现在滚动有点＆＃34;紧张＆＃34;

你能帮助我吗？

非常感谢

Answer 1

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

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

我只是使用：

body{
    overflow:hidden;
}

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

1 个答案: