Locomotive Scroll滚动失效排查：page-2无法滑至page-1上方求助

你要实现滚动时page-2向上滑动覆盖page-1的效果，但当前代码存在以下核心问题：

核心问题点 #

• 未初始化Locomotive Scroll：仅引入库文件但未创建实例，自定义滚动功能完全未激活。
• 未关联Locomotive与ScrollTrigger：GSAP ScrollTrigger默认监听原生滚动，和Locomotive的自定义滚动机制不兼容，必须配置代理才能联动。
• 缺少动画逻辑：没有编写GSAP代码来控制page-2的滑动行为，自然无法触发覆盖效果。
• 定位层级错误：page-2使用position: relative，滚动时只会在page-1下方跟随，无法实现覆盖视觉效果。

修复步骤与完整代码 #

1. 调整CSS定位规则 #

修改容器和页面元素的定位属性，让page-2具备覆盖page-1的条件：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body, html {
    width: 100%;
    height: 100%;
}

#main {
    position: relative;
    overflow: hidden; /* 隐藏溢出内容 */
    height: auto;
} 

#page-1 {
    height: 100vh;
    width: 100vw;
    position: fixed; /* 固定page-1在视口，让page-2滚动覆盖 */
    top: 0;
    left: 0;
} 

#page-1>video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#page-1>nav {
    display: flex;
    justify-content: space-between;
    height: 10vh;
    width: 100%;
    padding: 0 30px;
    position: absolute;
}

.right-nav {
    margin: 20px;
}

.right-nav>button {
    padding: 10px 20px;
    border-radius: 50px;
    background-color: #0e50fa;
    border: 1px solid white;
    color: white;
}

.text {
    position: absolute;
    bottom: 25%;
    left: 15%;
}

.text>h2 {
    font-size: 6vw;
    color: white;
}

.text-inner {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30%;
    width: 100%;
}
.text-inner>h4{
    color: whitesmoke;
    font-weight: 300;
}
.text-inner>button{
    padding:10px 20px;
    color:#0e50fa;
    border: 1px solid #0e50fa;
    border-radius: 50px;
    background-color:white;
}

/*page-2 修改后*/
#page-2{
    position: relative;
    height: 100vh;
    width:100vw;
    background-color: red;
    margin-top: 100vh; /* 让page-2初始处于视口下方 */
}

2. 添加JavaScript逻辑 #

初始化Locomotive并关联ScrollTrigger，编写覆盖动画：

<!-- 放在所有库文件引入之后的body末尾 -->
<script>
// 初始化Locomotive Scroll实例
const locomotiveScroll = new LocomotiveScroll({
  el: document.querySelector('#main'),
  smooth: true,
  multiplier: 1
});

// 注册GSAP插件并关联滚动事件
gsap.registerPlugin(ScrollTrigger);
locomotiveScroll.on("scroll", ScrollTrigger.update);

// 配置ScrollTrigger代理，适配Locomotive自定义滚动
ScrollTrigger.scrollerProxy("#main", {
  scrollTop(value) {
    return arguments.length ? locomotiveScroll.scrollTo(value, 0, 0) : locomotiveScroll.scroll.instance.scroll.y;
  },
  getBoundingClientRect() {
    return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
  },
  pinType: document.querySelector("#main").style.transform ? "transform" : "fixed"
});

// 编写page-2向上覆盖的动画
gsap.to("#page-2", {
  y: "-100vh", // 向上移动一个视口高度
  ease: "none",
  scrollTrigger: {
    scroller: "#main", // 指定滚动容器为Locomotive的目标元素
    trigger: "#page-2",
    start: "top bottom", // 触发时机：page-2顶部碰到视口底部
    end: "top top", // 结束时机：page-2顶部碰到视口顶部
    scrub: true, // 滚动与动画进度同步
    markers: false // 调试时可改为true查看触发点
  }
});

// 监听ScrollTrigger刷新事件，同步Locomotive滚动状态
ScrollTrigger.addEventListener("refresh", () => locomotiveScroll.update());
ScrollTrigger.refresh();
</script>

完整HTML代码（整合后） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
</head>
<body>
    <div id="main">
        <div data-scroll data-scroll-speed="-5" id="page-1">
            <nav>
                <img src="./channels4_profile.png" alt="" style="opacity: 0.8;">
                <div class="right-nav">
                    <button>Book a Demo</button>
                    <button><i class="ri-menu-5-line"></i></button>
                </div>
            </nav>
            <div class="text">
                <h2>Experience Real <br>
                    Estate Agility</h2>
                <div class="text-inner">
                    <h4>Create a digital twin of your existing building <br>
                        and release the potential of Web3.</h4>
                    <button>Learn More</button>
                </div>
            </div>
            <video src="https://thisismagma.com/wp-content/themes/magma/assets/home/hero/1.mp4?2" autoplay loop muted></video>
        </div>
        <div id="page-2"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js" integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        const locomotiveScroll = new LocomotiveScroll({
            el: document.querySelector('#main'),
            smooth: true,
            multiplier: 1
        });

        gsap.registerPlugin(ScrollTrigger);
        locomotiveScroll.on("scroll", ScrollTrigger.update);
        ScrollTrigger.scrollerProxy("#main", {
            scrollTop(value) {
                return arguments.length ? locomotiveScroll.scrollTo(value, 0, 0) : locomotiveScroll.scroll.instance.scroll.y;
            },
            getBoundingClientRect() {
                return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
            },
            pinType: document.querySelector("#main").style.transform ? "transform" : "fixed"
        });

        gsap.to("#page-2", {
            y: "-100vh",
            ease: "none",
            scrollTrigger: {
                scroller: "#main",
                trigger: "#page-2",
                start: "top bottom",
                end: "top top",
                scrub: true,
                markers: false
            }
        });

        ScrollTrigger.addEventListener("refresh", () => locomotiveScroll.update());
        ScrollTrigger.refresh();
    </script>
</body>
</html>

效果说明 #

• page-1固定在视口内，page-2初始处于视口下方，滚动时会向上滑动并完全覆盖page-1。
• Locomotive的平滑滚动与GSAP动画完全同步，实现流畅的覆盖交互效果。

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