如何實現類似於Paragon網站的滾動效果

Question

我不知道這個滾動效果是如何調用的，所以不知道如何搜索我的答案，而且我無法在源代碼中找到它。什麼是負責滾動效果的代碼是Paragon，滾動將導致頁面向下滾動到我假設的下一個div。或者降低一定的高度。

Answer 1

我扔在一起CodePen。它沒有動畫，但解釋了一般機制（Paragon網站的做法不同，但開始以下可能更適合）。

核心部分是這樣的：

window.onwheel = function (e) { 
    e.preventDefault(); 
    var wDelta = e.deltaY > 0 ? 'down' : 'up'; 
    if (wDelta === "down") { 
     // scroll Down 
    } else { 
     // scroll Up 
    } 
} 

知道在哪裏可以滾動，當然我們需要知道我們在哪裏。有幾種方法可以做到這一點。我所做的是檢查當前top的viewport對它的height。

var offset = window.pageYOffset, 
    viewportHeight = document.documentElement.clientHeight; 

switch (parseInt(offset/viewportHeight,0)) { 
    case 0: 
     // we are in the first viewport 
     break; 
    case 1: 
     // we are in the second viewport 
     break; 
    ... 
} 

我剛剛檢查了它的功能。性能明智，可以改進。你也應該綁定​​（以趕上pageUp,pageDown,space等），但它可以以類似的方式完成。 爲確保向後兼容您需要展開代碼（例如綁定到onmousewheel事件）。但是這會給你一個開始的地方。

PS

還要考慮你想要什麼樣的行爲重新加載頁面（如果用戶重裝而viewports之間會留在它們之間，直到另一個scroll發生）時。

This answer could also interest you.