效果预览

亦小封の主页

欢迎查看我的个人主页

思路讲解

在我的个人主页中，上下滑动（滚动）时会有一个缓冲的效果。
其实在一些非常好的网站里也会用到滑动阻尼的效果。它会使用户的交互体验得到一个非常棒的提升。

通常来说，也可以使用CSS的 scroll-behavior 属性，这个属性是可以让你在滑动容器时提供平滑的滚动行为。
但是，这个属性暂时不是我想要的阻尼效果。

滑动原理

添加一个缓动效果，使用一个容器.scrollbox，使用 transition 属性，实现滑动缓冲效果时长。

固定窗口，将我们的浏览器窗口固定在原位。
首先我们要明白一点，为什么我们的浏览器窗口可以上下移动？那是因为页面内容超过浏览器窗口大小，从而body大小改变，出现滚动条，使触发浏览器窗口滚动。

所以先将整个网页内容大小固定起来，将它设置为窗口大小。再为它添加个容器，使得它跟我们浏览器窗口大小相同。

再添加容器.viewbox，使用 fixed 属性，将它固定在浏览器顶端。
这个时候就可以使用JS来监听滚动事件。

首先获取.scrollbox的实际高度，然后将其的高度设为body的高度。（offsetHeight包括边框和内部空白补丁）
最后要做的就是，当我们滚动的时候，为.scrollbox添加一个 transform 属性移动即可。

效果实现

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动阻尼</title>
    <style>
        * {
            font-size: 2vmin;
            margin: 0;
            padding: 0;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            background-color: #171717;
        }

        .scrollbox {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            flex-shrink: 0;
            transition: .3s ease-out;
        }

        .viewbox {
            position: fixed;
            top: 0;
            display: flex;
            align-items: flex-start;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        .box {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: calc(18px + 1vw);
            font-weight: bold;
        }

    </style>
</head>

<body>
    <div class="viewbox">
        <div class="scrollbox">
            <div class="box" style="background-color: #17f700;">#17f700</div>
            <div class="box" style="background-color: #ffc93e;">#ffc93e</div>
            <div class="box" style="background-color: #0084FF;">#0084FF</div>
            <div class="box" style="background-color: #FF3842;">#FF3842</div>
            <div class="box" style="background-color: #d44040;">#d44040</div>
        </div>
    </div>
</body>
<script>
    let scrollbox = document.getElementsByClassName("scrollbox")[0];
    function resize_body() {
        let height = scrollbox.offsetHeight;
        document.body.style.height = `${height}px`;
    };
    function scroll() {
        scrollbox.style.transform = `translateY(${-scrollY}px)`;
    };
    window.addEventListener("scroll", scroll);
    window.addEventListener("load", resize_body);
    window.addEventListener("resize", resize_body);
</script>

</html>