線性緩動減慢

Question

第一個問題： 找不到爲什麼.animate線性減速到達目標點時。 我錯過了什麼？

奇怪的是，從中間圖片向上它總是完美的作品（只在這種情況下）。

第二個問題： 有沒有辦法在動畫正在進行時禁止用戶滾動？

[編輯] 我已經切出照片，以便更容易調試 [/編輯]

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

 
\t var isScrolling = false; 
 
\t \t 
 
\t window.addEventListener("scroll", throttleScroll, false); 
 
\t \t \t \t 
 
\t function throttleScroll(e) { 
 
\t if (isScrolling == false) { 
 
\t  window.requestAnimationFrame(function() { 
 
\t  scrolling(e); 
 
\t  isScrolling = false; 
 
\t  //console.log("Scrolling"); 
 
\t  }); 
 
\t } 
 
\t isScrolling = true; 
 
\t } 
 
\t \t \t \t 
 
\t document.addEventListener("DOMContentLoaded", scrolling, false); 
 
\t 
 
\t function scrolling(e) { 
 
\t var yValue = $(window).scrollTop(); 
 
\t \t \t \t \t 
 
\t //1st photo, scroll down 
 
\t if (yValue > 0 && scrollCheck === 0){ 
 
\t \t \t \t \t \t 
 
\t  $('body').stop().animate({scrollTop:heightVal}, 700, 'linear'); 
 
\t  if (window.pageYOffset === heightVal){ 
 
\t  scrollCheck = 1; 
 
\t  //console.log(window.pageYOffset); 
 
\t  } 
 
\t }//2nd photo, scroll up 
 
\t else if(yValue < heightVal && scrollCheck === 1 ){ 
 
\t \t \t \t \t \t 
 
\t  $('body').stop().animate({scrollTop:(-heightVal)}, 700, 'linear'); 
 
\t  if (window.pageYOffset === 0){ 
 
\t  scrollCheck = 0; 
 
\t  } 
 
\t }//2nd photo, scroll down 
 
\t else if(yValue > heightVal && scrollCheck === 1){ 
 

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

 
      $('body').stop().animate({scrollTop:(heightVal)}, 700, 'linear'); 
 
\t \t if (window.pageYOffset === heightVal){ 
 
\t \t scrollCheck = 1; 
 
\t \t } 
 
\t } 
 
    }//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>

Answer 1

animate()因爲你調用它的每一個不會直線狀時間觸發scroll事件。發生這種情況是因爲當您這樣做時：

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

計算機不會等待動畫完成以繼續執行程序流程;相反，它啓動動畫並執行，將false立即分配給isScrolling變量。此外，您不需要使用​​，並且它導致isScrolling = false分配在isScrolling = true之後運行，並且幾乎沒有延遲 - 這是由於這些功能的asynchronous nature。

這將導致scroll事件偵聽器每它的觸發時間致電animate()功能，因爲isScrolling是從來沒有true。

這個問題可以通過等待animate()回調分配false到isScrolling，去除​​調用來解決，這是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; 
 
     } 
 
\t } 
 

 

 
} 
 
});

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>