scrollTop（）和幻燈片狀的動畫

Question

我試圖讓頁面像幻燈片一樣工作，每個部分都以幻燈片的形式出現。該HTML是4節的元素，每個ID約爲，約2等我使用jQuery使他們在窗口高度加載時。在向下滾動時，我激活了從一張幻燈片到另一張幻燈片的功能。

它在第一張幻燈片上效果很好，但之後卡在它上面。如果我重新加載頁面並在該位置重新加載，它將一直運行，直到下一張幻燈片再次停留。看看這個值，我可以看到激活下一個動畫的條件（例如，動畫到＃about3），但它拒絕移動（當滾動時總是動畫到＃about2）。

我在這裏做錯了什麼？

function scrollDown(){ 
    $height = window.innerHeight; 
    $scroll = $(window).scrollTop(); 
    console.log($scroll+' and '+$height); 
    if ($scroll > 0 && $scroll < $height) { 
     $('html, body').animate({scrollTop: $("#about2").offset().top}, 1000);  
    } else if ($scroll > $height && $scroll < 2*$height) { 
     $('html, body').animate({scrollTop: $("#about3").offset().top}, 1000);  
    } else if ($scroll > 2*$height && $scroll < 3*$height) { 
     $('html, body').animate({scrollTop: $("#about4").offset().top}, 1000);  
    } 
} 

這裏是我的代碼的jsfiddle：https://jsfiddle.net/9b8s6pna/

Answer 1

你接近，但只是缺少了一兩件事。由於調用了scrollDown函數的次數，它似乎並沒有將它傳遞到下一節。每創建一次滾動就創建一個事件，然後通知窗口做更多的滾動操作，這將引發更多的滾動事件來創建長鏈。實質上，一大羣動畫請求正在排隊。最終，如果您讓頁面坐得夠長，它會向下滾動到about3部分。

我添加了一個布爾值來跟蹤窗口滾動的時間，並將其添加到您的邏輯檢查中。這應該有助於防止過多的動畫調用：]當窗口滾動到特定部分的條件滿足時，布爾型「isScrolling」設置爲true。動畫完成後，該布爾值將重置爲false，並可以進行另一個滾動動畫。

var isScrolling = false; 

function scrollDown(){ 
    $height = window.innerHeight; 
    $scroll = $(window).scrollTop(); 
    console.log($scroll+' and '+$height); 
    if ($scroll > 0 && $scroll < $height && isScrolling === false) { 
      console.log('about1'); 
      isScrolling = true; 
      $('html, body').animate({ 
       scrollTop: $("#about2").offset().top 
      }, 1000, function(){ isScrolling = false; } 
     );  
    } else if ($scroll > $height && $scroll < $height * 2 && isScrolling === false) { 
      console.log('about2'); 
      isScrolling = true; 
      $('html, body').animate({ 
          scrollTop: $("#about3").offset().top 
          }, 1000, 
      function(){ isScrolling = false; } 
     );  
    } else if ($scroll > 2*$height && $scroll < $height * 3 && isScrolling === false) { 
      console.log('about3'); 
      isScrolling = true; 
      $('html, body').animate({ 
       scrollTop: $("#about4").offset().top 
       }, 1000, 
       function(){ isScrolling = false; } 
     );  
    } 
} 

此外，請注意，我有一個小調整添加到CSS到身體上的邊距設置爲0。這是在比較中產生的問題，並會使頁面認爲這是滾動進一步下跌比實際情況要好，因此在整個頁面上開始滾動到下一部分。通過滾動一次，它會創建一個連鎖反應，一次滾動整個網站。要看到這個動作，只需刪除邊距：0;在這個jsfiddle的身體標記上。