滚动控制Sticky容器中Lottie动画失效问题排查求助

需要实现滚动Sticky容器时同步播放内部Lottie动画：向下滚动时动画随滚动进度播放，同时在特定滚动节点实现额外文本的淡入/淡出效果。目前动画无法正常跟随滚动播放，请求排查代码问题。

现有代码核心问题：

• 混用lottie-player标签内置滚动交互属性与自定义滚动事件，控制逻辑冲突
• 自定义滚动事件仅计算滚动百分比，但未将其映射到Lottie动画的播放进度
• 未正确获取lottie-player实例并调用播放控制API

修复步骤：

1. 移除lottie-player标签上的interactivitytype、interactivitymode等内置滚动交互属性，避免逻辑冲突
2. 在scroll事件监听中，将滚动百分比转换为动画进度，调用lottie-player的seek()方法控制播放位置
3. 确保DOM加载完成后获取lottie-player元素引用，保证操作有效性

HTML #

<div id="cover_container">
    <div id="cover">
        <div id="lotti">
            <lottie-player id="test" speed="3" background="transparent" class="lottie-player mx-auto" style="width:315px;height:280px;overflow:visible" src="https://assets5.lottiefiles.com/datafiles/zc3XRzudyWE36ZBJr7PIkkqq0PFIrIBgp4ojqShI/newAnimation.json"></lottie-player>
        </div>
    </div>
</div>

CSS #

#cover {
    position: sticky;
    display: block;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: black;
}

#cover_container {
    position: relative;
    width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: 400vh;
    background: lightgray;
    overflow: visible !important;
}

#lotti {
    position: absolute;
    height: 400px;
    width: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background: navy;
}

/* Override to enable sticky scrollers to work */
#td-outer-wrap{
    overflow: visible;
}

JavaScript #

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script defer>
    /**
    * Returns the percentage (0 to 100) of the way scrolled through a sticky container
    * @param {*} stickyContainer CSS selector to get the parent container holding the sticky element
    * @param {*} stickyElement CSS selector to get the sticky element
    * @returns 
    */
    function getPercentScrolled(stickyContainer, stickyElement) {
        const container = document.querySelector(stickyContainer).getBoundingClientRect();
        const stickyEl = document.querySelector(stickyElement).getBoundingClientRect();

        const scrollPosition = -container.top;
        const scrollHeight = container.height - stickyEl.height;

        let percentScrolled = (scrollPosition / scrollHeight) * 100;
        percentScrolled = Math.max(0, Math.min(100, percentScrolled));

        return percentScrolled;
    }

    // 获取lottie-player实例
    let lottiePlayer;

    window.onload = function() { 
        lottiePlayer = document.getElementById('test');
        // 初始触发一次滚动事件，设置初始状态
        window.dispatchEvent(new Event('scroll'));
    };

    // 滚动事件监听
    window.addEventListener('scroll', () => {
        if (!lottiePlayer) return;
        
        const percentScrolled = getPercentScrolled('#cover_container', '#cover');
        // 将百分比转换为动画进度（0到1），调用seek控制播放位置
        lottiePlayer.seek(percentScrolled / 100);
    });
</script>

• 若需实现特定滚动节点的文本淡入淡出，可在scroll事件中根据percentScrolled的值（如20%、50%等），为目标文本元素添加/移除透明度相关CSS类
• 可调整cover_container的height值控制滚动触发动画的总长度
• 若动画播放速度不符预期，可调整speed属性或进度计算逻辑

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