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;
    ...
}

我刚检查了它的功能。性能方面，它可以改进。您还应该绑定keydown（以捕获pageUp，pageDown，space等等，但也可以以类似的方式完成。 为确保向后兼容性，您需要扩展代码（例如绑定到onmousewheel事件）。但这会给你一个开始的地方。

<强> PS

还要考虑重新加载页面时的行为（如果用户在viewports之间重新加载，它将保持在它们之间，直到另一个scroll发生。）

This answer could also interest you.

如何实现类似于Paragon网站的滚动效果

1 个答案: