如何实现类似于百利宫网站的滚动效果

How to achieve a scrolling effect similar to the Paragon site

本文关键字：网站 滚动 何实现 实现 类似于      更新时间：2023-09-26

我不知道这个滚动效果叫什么所以不知道如何搜索我的答案，我在源代码中找不到它。负责 Paragon 滚动效果的代码是什么，滚动将导致页面向下滚动到我假设的下一个div。或下降一定高度。

我拼凑了一个CodePen。它没有动画，但解释了一般机制（Paragon网站的做法不同，但开始以下内容可能更适合）。

核心部分是这样的：

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

滚动，我们当然需要知道我们在哪里。有几种方法可以做到这一点。我所做的是检查viewport的当前top与其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 事件）。但这将为您提供一个开始的地方。

附言

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

这个答案也可能让你感兴趣。

相关文章：