实现高级平滑粘性滚动效果：JavaScript驱动的自定义滚动教程-html教程-PHP中文网

实现高级平滑粘性滚动效果：JavaScript驱动的自定义滚动教程

花韻仙語

发布： 2025-11-17 11:40:37

原创

538人浏览过

实现高级平滑粘性滚动效果：JavaScript驱动的自定义滚动教程

本教程详细阐述如何通过javascript和css实现类似weltio网站的平滑粘性滚动效果。核心在于禁用原生滚动，监听用户滚轮输入，并利用`requestanimationframe`和`transform: translate3d()`平滑地控制页面元素的垂直或水平位移。这种方法能创建高度定制化且流畅的滚动体验，适用于复杂的交互设计，弥补纯css在实现此类效果上的不足。

引言：超越原生滚动的限制

在现代Web设计中，平滑、粘性且富有交互性的滚动效果已成为提升用户体验的重要手段。许多网站，如Weltio，通过独特的滚动动画，在用户滚动页面时呈现出内容平滑过渡、元素“粘滞”或横向切换的视觉效果。然而，仅依靠CSS的scroll-snap等原生滚动特性，往往难以实现这种高度定制化且极其流畅的动画效果。当需要精细控制滚动速度、加入弹性回弹或实现复杂的滚动联动时，纯CSS的局限性便显现出来。

为了实现这种高级的平滑粘性滚动，我们需要一种更强大的控制机制——通过JavaScript来“劫持”和管理页面的滚动行为。这种方法的核心思想是禁用浏览器原生的滚动条，然后通过监听用户输入（如滚轮事件），并利用JavaScript和CSS transform 属性来模拟和驱动页面的平滑滚动。

核心原理：JavaScript驱动的平滑滚动机制

实现自定义平滑滚动效果的关键在于以下几个核心原理：

禁用浏览器原生滚动： 这是第一步，通过在body元素上设置overflow: hidden;，阻止浏览器默认的滚动行为，从而将滚动控制权完全交给JavaScript。
监听用户输入： 使用window.addEventListener("wheel", ...)来捕获用户的滚轮事件。event.deltaY属性提供了滚动的垂直距离和方向，是驱动自定义滚动的输入源。对于触摸设备，则需要监听touchstart、touchmove、touchend等事件来模拟滚动。
双变量平滑插值： 为了实现平滑过渡，我们引入两个关键变量：
- desiredScroll：代表用户期望的滚动位置，它会根据滚轮输入立即更新。
- actualScroll：代表当前页面实际渲染的滚动位置。通过一个插值算法（例如：actualScroll = actualScroll + (desiredScroll - actualScroll) / delay;），让actualScroll以一定的平滑度逐渐趋近desiredScroll。delay值越大，滚动效果越平滑。
动画循环与性能优化： 使用window.requestAnimationFrame()来创建一个高效的动画循环。requestAnimationFrame会在浏览器下一次重绘之前执行回调函数，确保动画与浏览器渲染同步，从而提供最佳的流畅度和性能。
CSS transform 实现位移： 页面内容的实际移动通过CSS transform: translateY()（垂直滚动）或translateX()（水平滚动）来实现。transform属性通常由GPU加速，相比直接修改top、left或margin等属性，它能提供更流畅的动画效果，因为它不会触发页面的布局（layout）或重绘（paint）过程。

实现步骤与代码示例

接下来，我们将逐步构建一个具备平滑滚动和弹性回弹效果的页面。

立即学习“Java免费学习笔记（深入）”；

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

1. 基础HTML结构与CSS重置

首先，我们需要一个包含多个内容块的HTML页面，并应用基础的CSS样式来禁用原生滚动和设置元素样式。

<!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>
        /* CSS 重置 */
        html, body {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* 确保 padding 和 border 包含在元素宽度内 */
        }

        /* 页面背景色 */
        html {
            background-color: #334499;
        }

        /* 禁用原生滚动，为内容提供一些垂直内边距 */
        body {
            overflow: hidden; /* 核心：禁用原生滚动 */
            min-height: 100vh; /* 确保 body 有足够高度，即使内容不多 */
            padding: 20px 0; /* 为内容提供一些垂直内边距 */
            will-change: transform; /* 提示浏览器 transform 将会改变，有助于性能优化 */
        }

        /* 内容块样式 */
        .element {
            height: 300px; /* 内容块高度 */
            background-color: #112233; /* 内容块背景色 */
            margin: 20px; /* 内容块间距 */
            border-radius: 20px;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2em;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>
    <div class="element">内容块 1</div>
    <div class="element">内容块 2</div>
    <div class="element">内容块 3</div>
    <div class="element">内容块 4</div>
    <div class="element">内容块 5</div>
    <div class="element">内容块 6</div>
</body>
</html>

登录后复制

2. JavaScript核心逻辑：监听与平滑滚动

接下来，我们将编写JavaScript代码来实现滚轮事件监听、滚动数据管理以及平滑动画循环。

// JavaScript 核心逻辑
let desiredScroll = 0; // 用户期望的滚动位置
let actualScroll = 0;  // 实际渲染的滚动位置
const smoothFactor = 10; // 控制平滑度，值越大越平滑，动画越慢

/**
 * 更新滚动位置的动画函数
 */
function updateScroll() {
    // 平滑地将 actualScroll 趋近 desiredScroll
    // 这是一个简单的指数加权移动平均算法
    actualScroll = actualScroll + (desiredScroll - actualScroll) / smoothFactor;

    // 当实际滚动位置与期望位置非常接近时，直接设为期望位置
    // 避免无限接近的小数计算，提高精度和性能
    if (Math.abs(actualScroll - desiredScroll) < 0.1) {
        actualScroll = desiredScroll;
    }

    updateTransform(); // 更新页面元素的transform

    // 循环调用 requestAnimationFrame，实现持续动画
    window.requestAnimationFrame(updateScroll);
}

/**
 * 应用 transform 样式来移动页面内容
 */
function updateTransform() {
    // 将整个 body 元素向上移动，模拟页面滚动
    // 注意：这里是负值，因为向下滚动时 desiredScroll 增加，页面内容应向上移动
    document.body.style.transform = `translateY(${-actualScroll}px)`;
}

// 监听滚轮事件，更新 desiredScroll
window.addEventListener("wheel", event => {
    // event.deltaY 表示滚动的垂直距离
    // 正值表示向下滚动，负值表示向上滚动
    desiredScroll += event.deltaY;
});

// 启动动画循环
window.requestAnimationFrame(updateScroll);

登录后复制

3. 滚动边界限制与弹性回弹效果

为了防止用户滚动超出内容的顶部或底部，我们需要计算最大滚动高度并限制desiredScroll。同时，我们可以增加一个弹性效果，当滚动超出边界时，滚动速度减慢，并在松开滚轮后平滑回弹。

// JavaScript 核心逻辑（包含边界限制与弹性回弹）
let desiredScroll = 0; // 用户期望的滚动位置
let actualScroll = 0;  // 实际渲染的滚动位置
const smoothFactor = 10; // 控制平滑度，值越大越平滑，动画越慢

/**
 * 更新滚动位置的动画函数
 */
function updateScroll() {
    // 计算最大可滚动高度
    // document.body.clientHeight 是 body 的实际内容高度
    // window.innerHeight 是视口的高度
    const maxScrollHeight = document.body.clientHeight - window.innerHeight;

    // --- 边界限制与弹性效果处理 ---
    // 当 desiredScroll 小于 0 (超出顶部)
    if (desiredScroll < 0) {
        // 减慢负向滚动，实现弹性效果
        desiredScroll -= desiredScroll / (smoothFactor / 2);
    }
    // 当 desiredScroll 大于最大滚动高度 (超出底部)
    else if (desiredScroll > maxScrollHeight) {
        // 减慢正向滚动，实现弹性效果
        desiredScroll -= (desiredScroll - maxScrollHeight) / (smoothFactor / 2);
    }
    // --- 边界处理结束 ---

    // 平滑地将 actualScroll 趋近 desiredScroll
    actualScroll = actualScroll + (desiredScroll - actualScroll) / smoothFactor;

    // 当实际滚动位置与期望位置非常接近时，直接设为期望位置
    if (Math.abs(actualScroll - desiredScroll) < 0.1) {
        actualScroll = desiredScroll;
    }

    updateTransform(); // 更新页面元素的transform

    window.requestAnimationFrame(updateScroll); // 循环调用
}

/**
 * 应用 transform 样式来移动页面内容
 */
function updateTransform() {
    document.body.style.transform = `translateY(${-actualScroll}px)`;
}

// 监听滚轮事件，更新 desiredScroll
window.addEventListener("wheel", event => {
    const scrollDelta = event.deltaY;
    const maxScrollHeight = document.body.clientHeight - window.innerHeight;

    // 在边界处减缓 desiredScroll 的增加，增强弹性效果
    if (desiredScroll < 0 && scrollDelta < 0) {
        desiredScroll += scrollDelta / 2; // 向上滚动超出顶部，减缓
    } else if (desiredScroll > max

登录后复制

以上就是实现高级平滑粘性滚动效果：JavaScript驱动的自定义滚动教程的详细内容，更多请关注php中文网其它相关文章！