jquery - 线性宽松放慢

第一个问题：
无法弄清楚为什么.animate linear在到达目标点时会变慢。
我想念什么？

奇怪的是，从中间图片开始，它总是完美运行（仅在这种情况下）。

第二个问题：
有没有一种方法可以在进行动画时禁止用户滚动？

[编辑]
我已剪出图片，因此更容易调试
[/编辑]

$(document).ready( function (){
	var scrollCheck = 0;
	var heightVal = window.innerHeight;


	$(window).resize(function(){
	  window.scroll(0,0);
	  heightVal = window.innerHeight;
	  hControl1 = heightVal -1;
	  scrollCheck = 0;
	});

	var isScrolling = false;

	window.addEventListener("scroll", throttleScroll, false);

	function throttleScroll(e) {
	  if (isScrolling == false) {
	    window.requestAnimationFrame(function() {
	      scrolling(e);
	      isScrolling = false;
	      //console.log("Scrolling");
	    });
	  }
	isScrolling = true;
	}

	document.addEventListener("DOMContentLoaded", scrolling, false);

	function scrolling(e) {
	var yValue = $(window).scrollTop();

	  //1st photo, scroll down
	  if ( yValue > 0 && scrollCheck === 0 ){

	    $('body').stop().animate({scrollTop:heightVal}, 700, 'linear');
	    if ( window.pageYOffset === heightVal ){
	      scrollCheck = 1;
	      //console.log(window.pageYOffset);
	    }
	  }//2nd photo, scroll up
	  else if( yValue < heightVal  && scrollCheck === 1  ){

	    $('body').stop().animate({scrollTop:(-heightVal)}, 700, 'linear');
	    if ( window.pageYOffset === 0 ){
	      scrollCheck = 0;
	    }
	  }//2nd photo, scroll down
	  else if( yValue > heightVal  && scrollCheck === 1 ){

	    $('body').stop().animate({scrollTop:(heightVal*2)}, 700, 'linear');
            if ( window.pageYOffset === (heightVal*2) ){
	      scrollCheck = 2;
	    }
	  }//3rd photo, scroll up
	  else if( yValue < heightVal*2 && scrollCheck === 2){

            $('body').stop().animate({scrollTop:(heightVal)}, 700, 'linear');
		if ( window.pageYOffset === heightVal ){
		  scrollCheck = 1;
		}
	  }
    }//end of scrolling(e) funcion
}); //end of $(document).ready

html,body{
  margin: 0;
  height: 100%;
  width: 100%;
}
#section1,#section2,#section3{
  height: 100%;
  width: 100%;
  vertical-align: top;
}
#section1{
  background-color: grey;
}
#section2{
  background-color: green;
}
#section3{
  background-color: red;
}

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

<div id='section2'></div>

<div id='section3'></div>

最佳答案

animate()不会线性运行，因为每次触发scroll事件时都会调用它。发生这种情况是因为执行以下操作：

$("body").stop().animate({scrollTop: 0}, 700);
isScrolling = false;

计算机无需等待动画完成就可以继续执行程序流程。而是开始动画并继续，立即将false分配给isScrolling变量。另外，不需要使用requestAnimationFrame，它会导致isScrolling = false赋值在isScrolling = true之后运行，几乎没有延迟-由于这些功能的asynchronous nature。

这会导致scroll事件侦听器在每次触发时都调用animate()函数，因为isScrolling从不true。

通过等待animate()回调将false分配给isScrolling，除去requestAnimationFrame调用及其isScrolling = false;分配，可以解决该问题。



最后一件事...


奇怪的是，从中间图片开始，它总是完美运行（仅在这种情况下）。


不，不是，但是看起来是这样，因为您将其设置为{scrollTop: -heightVal}，而应将其设置为{scrollTop: 0}。

请注意，我强烈建议对函数和变量名进行广泛的重构。除了您可以在不到30分钟的时间内理解您的代码之外，没有其他人可以使用。

这是上述所有更改（包括更好的命名）的结果：

$(document).ready( function (){
var currentSection = 0;
var windowHeight = window.innerHeight;


$(window).resize(function(){
    window.scroll(0,0);
    windowHeight = window.innerHeight;
    hControl1 = windowHeight -1;
    currentSection = 0;
});

var isScrolling = false;


window.addEventListener("scroll", scrollSnappingController, false);

function scrollSnappingController(e) {
    if (isScrolling === false) {
            snapScrollToNextSection(e);
            console.log("first")
        isScrolling = true;
        console.log("second")
    }
}
function scrollEnded () {
    isScrolling = false;
}

document.addEventListener("DOMContentLoaded", snapScrollToNextSection, false);

var section1 = $("#section1");
var section2 = $("#section2");
var section3 = $("#section3");

function snapScrollToNextSection(e) {
    var scrollPosition = $(window).scrollTop();

    //1st photo goin down
    if ( scrollPosition > 0 && currentSection === 0 ){
        $('body').stop().animate({scrollTop: windowHeight}, 700, 'linear', scrollEnded);

        if ( scrollPosition === windowHeight ){
            currentSection = 1;
        }

    }
    else if( scrollPosition < windowHeight  && currentSection === 1  ){

        $('body').stop().animate({scrollTop:(0)}, 700, 'linear', scrollEnded);

        if ( scrollPosition === 0 ){
            currentSection = 0;
        }

    }
    else if( scrollPosition > windowHeight  && currentSection === 1 ){

        $('body').stop().animate({scrollTop:(windowHeight*2)}, 700, 'linear', scrollEnded);

        if ( scrollPosition === (windowHeight*2) ){
            currentSection = 2;
        }

    }
    else if( scrollPosition < windowHeight*2 && currentSection === 2){
        $('body').stop().animate({scrollTop:(windowHeight)}, 700, 'linear', scrollEnded);

        if ( scrollPosition === windowHeight ){
            currentSection = 1;
        }
	}


}
});

html,body{
margin: 0;
height: 100%;
width: 100%;
}

img{
display: block;
height:100%;
width:100%;
margin: 0;
padding:0;
}

#section1,#section2,#section3{
height: 100%;
width: 100%;
vertical-align: top;
}
#section1{
background-color: grey;
}
#section2{
background-color: green;
}
#section3{
background-color: red;
}

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

<div id='section2'></div>

<div id='section3'></div>

关于jquery - 线性宽松放慢，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39315155/