前端分享 - 滑动阻尼效果

在页面上下滚动（滑动）浏览内容时，页面的滚动会随着我们滚轮停止而停止，在某些浏览体验中，会显得略微生硬。
CSS里有个scroll-behavior属性，可以使得滚动变得平滑，但却并不是阻尼效果。

于是在某次冲浪，看到了@JIEJOE的个人网站实现了类似阻尼感的滑动效果。

效果实现

通过为页面添加一个缓冲滑动的效果，我们可以使用一个名为.scrollbox的容器，并结合transition属性来设定滚动的缓动时长。

为了固定视窗，我们需要先将浏览器窗口的位置锁定。页面内容会因为高度超过视窗而出现滚动条，导致页面可以上下滑动。我们通过将页面大小固定为窗口大小，并创建一个与窗口高度一致的容器，实现滚动限制。

接着，添加一个名为.viewbox的容器，并通过CSS的fixed属性将其固定在页面顶部。随后，通过 JavaScript监听滚动事件并动态更新.scrollbox的位置。

<!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>