ScrollTop檢測到滾動時

Question

我想製作一個像這個頁面上的功能。 B&O BeoPlay A3

當您向下滾動時，會自動滾動到下一頁。

我一直在玩window.pageYOffset。 我有這個至今：

window.onscroll = scroll; 

     function scroll() { 
      setTimeout(function() { 
       if (window.pageYOffset < 100 && window.pageYOffset > 2) { 
        scrollLogin(); 
       } 
       else if (window.pageYOffset > 100 && window.pageYOffset < 159 && window.pageYOffset != 124) { 
        scrollSky(); 
       } 
       else if (window.pageYOffset > 159 && window.pageYOffset < 248) { 
        scrollCity(); 
       } 
      },500); 
     } 
     function scrollLogin() { 
      $('html,body').animate({ 
       scrollTop: $("#login").offset().top 
      }, 500); 
     } 
     function scrollSky() { 
      $('html,body').animate({ 
       scrollTop: $("#skyContainer").offset().top 
      }, 500); 
     } 
     function scrollCity() { 
      $('html,body').animate({ 
       scrollTop: $("#city").offset().top 
      }, 500); 
     } 

的問題是，這種方式是不工作無縫的。我必須等待500毫秒，直到我再次滾動。如果這也只適用於固定的屏幕分辨率。 你知道更好的方法來存檔這個功能嗎？這也可以讓百分比度量值在不同分辨率的顯示器上工作。

Link to my attempt。所以我想要3個狀態，即視口支持：頂部（登錄欄），中間（天空動畫）和底部（搜索欄）。

非常感謝！

編輯：

TAKE 2：

我做了一個變量，它告訴我，如果動畫結束。當動畫開啓時，它的值就是'1'，這可以防止各種混亂。

所以我現在的腳本工作得很好。唯一的問題是它只能用於innerHeight和innerWidth。 （innerHeight：863 - innerWidth：1440）。

有沒有辦法使window.pageYOffset百分比？ 這是存檔此效果的最佳方式嗎？

謝謝你，祝你有美好的一天。

這是我的新代碼：

window.onscroll = scroll; 

     var animationIsOn = 0; 

     function scroll() { 
      if (animationIsOn == 0) { 
       var pageY = window.pageYOffset; 
       if (pageY < 119 && pageY > 69) { 
        scrollLogin(); 
       } 
       else if (pageY > 5 && pageY < 69 || pageY > 179 && pageY < 254) { 
        scrollSky(); 
       } 
       else if (pageY > 129 && pageY < 179) { 
        scrollCity(); 
       } 
      } 
     } 
     function scrollLogin() { 
      animationIsOn = 1; 
      $('html,body').animate({ 
       scrollTop: $("#login").offset().top 
      }, 500, function() { 
       animationIsOn = 0; 
      }); 
     } 
     function scrollSky() { 
      animationIsOn = 1; 
      $('html,body').animate({ 
       scrollTop: $("#skyContainer").offset().top 
      }, 500, function() { 
       animationIsOn = 0; 
      }); 
     } 
     function scrollCity() { 
      animationIsOn = 1; 
      $('html,body').animate({ 
       scrollTop: $("#city").offset().top-600 
      }, 500, function() { 
       animationIsOn = 0; 
      }); 
     } 

Answer 1

要獲得pageYOffset爲百分比，只需除以pageYOffset通過document.documentElement.scrollHeight，並通過100

編輯乘：Ckrill發現他需要使用window.innerHeight而不是文檔的scrollHeight屬性。