如何实现网页滚动速度随用户向下滚动深度增加而动态加快？

核心逻辑 #

• 监听用户的滚动输入（鼠标滚轮、触摸板滚动等事件）
• 读取当前页面已滚动距离window.scrollY，滚动距离越远，给滚动操作设置的步长值越大
• 阻止原生滚动行为，用自定义的计算值控制页面滚动，实现速度随滚动距离递增的效果

完整可运行示例代码 #

你可以直接复制以下代码到本地html文件中打开测试：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>滚动加速测试</title>
    <style>
        /* 把页面撑高保证可滚动 */
        body {
            height: 10000px;
            background: linear-gradient(#fff, #000);
            margin: 0;
            padding: 20px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p>向下滚动测试速度变化</p>
    <script>
        // 基础滚动步长，可自行调整数值改变初始速度
        const baseStep = 20;
        // 加速度系数，越大速度增长越快
        const accelerationFactor = 0.005;

        window.addEventListener('wheel', (e) => {
            e.preventDefault();
            // 获取当前滚动距离
            const currentScroll = window.scrollY;
            // 计算当前滚动速度：基础步长 + 滚动距离 * 加速度系数
            const speed = baseStep + currentScroll * accelerationFactor;
            // 判断滚动方向：向下滚deltaY为正，向上为负
            const scrollDistance = e.deltaY > 0 ? speed : -speed;
            // 执行滚动
            window.scrollBy(0, scrollDistance);
        }, { passive: false });
    </script>
</body>
</html>

参数调整说明 #

• 修改baseStep的数值可以调整初始滚动的基础速度，数值越大初始速度越快
• 修改accelerationFactor的数值可以调整速度增长的幅度，数值越大，滚动距离增加时速度增长越快
• 如果需要限制最大速度，可在计算speed后加判断，超过最大阈值就固定为最大值即可

内容的提问来源于stack exchange，提问作者VminVsky