ScrollMagic项目实战：实现无限滚动(Infinite Scrolling)效果-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00835/article/details/148377617

ScrollMagic项目实战：实现无限滚动(Infinite Scrolling)效果

ScrollMagic The javascript library for magical scroll interactions. 项目地址: https://gitcode.com/gh_mirrors/sc/ScrollMagic

什么是无限滚动效果

无限滚动(Infinite Scrolling)是现代网页设计中常见的一种交互模式，当用户滚动到页面底部时，自动加载更多内容，无需手动点击"加载更多"按钮。这种技术在社交媒体、新闻网站和电子商务平台中广泛应用，提供无缝的内容浏览体验。

ScrollMagic实现原理

ScrollMagic是一个强大的JavaScript库，专门用于创建基于滚动位置的动画和交互效果。通过ScrollMagic，我们可以精确控制页面滚动时触发的各种行为，包括无限滚动效果。

核心实现步骤

初始化控制器：创建ScrollMagic控制器实例，管理所有场景
设置触发场景：定义一个场景(Scene)，当用户滚动到指定元素(如页面底部的加载指示器)时触发
加载状态管理：使用CSS类标记当前是否处于加载状态，防止重复触发
内容加载逻辑：触发场景后执行异步内容加载(实际项目中通常是AJAX请求)
场景更新：新内容加载完成后更新场景参数，确保下次触发位置正确

代码实现详解

// 初始化ScrollMagic控制器
var controller = new ScrollMagic.Controller();

// 创建场景，当加载指示器进入视口时触发
var scene = new ScrollMagic.Scene({
    triggerElement: ".dynamicContent #loader", 
    triggerHook: "onEnter"
})
.addTo(controller)
.on("enter", function (e) {
    // 检查是否已在加载状态
    if (!$("#loader").hasClass("active")) {
        $("#loader").addClass("active"); // 标记为加载状态
        console.log("loading new items");
        // 模拟AJAX请求，1秒后添加新内容
        setTimeout(addBoxes, 1000, 9);
    }
});

// 添加新内容的函数
function addBoxes (amount) {
    for (i=1; i<=amount; i++) {
        // 创建随机颜色的内容块
        var randomColor = '#'+('00000'+(Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
        $("<div></div>")
            .addClass("box1")
            .css("background-color", randomColor)
            .appendTo(".dynamicContent #content");
    }
    // 加载完成后更新场景并重置状态
    scene.update(); // 更新场景参数
    $("#loader").removeClass("active"); // 移除加载状态
}

// 初始加载一些内容
addBoxes(18);