Question

第一个问题：无法弄清楚为什么.animate线性在到达目的地时会减慢速度。我错过了什么？

奇怪的是，从中间的pic向上移动它总是完美地工作（仅在那种情况下）。

第二个问题：有没有办法在动画正在进行时禁止用户滚动？

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

onCreate

public static final String SELECTED_POSITION_KEY = "select_position";

private int mSelectedPosition;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    mSelectedPosition = getIntent().getIntExtra(SELECTED_POSITION_KEY, default_value);

}

$(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

Answer 1

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;分配来解决问题。< / p>

最后一件事......

奇怪的是，从中间的pic向上移动它总是完美地工作（仅在那种情况下）。

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

请注意，我非常强烈， HIGHLY 建议广泛重构函数和变量名称。除了你之外，没有人能在不到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>

线性宽松减慢

1 个答案: