ScrollMagic实现最后一个Panel延长停留时长问题求助

你之前的尝试没生效，主要是两个核心问题：

1. 全局配置里的duration: '100%'会覆盖单个场景的duration设置，导致你给最后一个场景单独设的duration无效；
2. 开启了pushFollowers: false后，ScrollMagic不会自动生成用来撑开滚动空间的spacer，就算加了duration，页面也没有足够的滚动距离让最后一个panel停留。

下面是具体的修改方案：

1. 调整全局控制器配置 #

先删掉全局的duration设置，让每个场景可以单独定义滚动时长：

$(function () {
    var controller = new ScrollMagic.Controller({
        globalSceneOptions: {
            triggerHook: 0.1,
            // 移除全局的duration配置
        },
    });

    var slides = document.querySelectorAll('section.panel');
    slides[0].classList.add('active');

2. 给最后一个场景单独配置duration和Pin参数 #

在循环中判断是否为最后一个panel，给它设置足够的duration（比如2000px，代表需要滚动2000px才会让panel离开视口），同时开启pushFollowers: true让ScrollMagic自动生成滚动空间：

for (let i = 0; i < slides.length; i++) {
        const isLastSlide = i === slides.length - 1;
        new ScrollMagic.Scene({
            triggerElement: slides[i],
            // 最后一个场景设置2000px的滚动时长，其他场景保持0
            duration: isLastSlide ? 2000 : 0,
        })
            .setPin(slides[i], {
                // 最后一个场景开启自动生成spacer，其他保持false
                pushFollowers: isLastSlide ? true : false,
                spacerClass: isLastSlide ? 'spacer-class' : '',
            })
            .on('enter leave', (event) => {
                // 原有的active类切换逻辑保持不变
                if (event.type === 'enter' && event.scrollDirection === 'FORWARD') {
                    slides[i].classList.add('active');
                    if (i > 0) slides[i - 1].classList.remove('active');
                } else if (
                    event.type === 'leave' &&
                    event.scrollDirection === 'FORWARD'
                ) {
                    slides[i].classList.remove('active');
                    if (i < slides.length - 1) slides[i + 1].classList.add('active');
                } else if (
                    event.type === 'enter' &&
                    event.scrollDirection === 'REVERSE'
                ) {
                    slides[i].classList.add('active');
                    if (i < slides.length - 1) slides[i + 1].classList.remove('active');
                } else if (
                    event.type === 'leave' &&
                    event.scrollDirection === 'REVERSE'
                ) {
                    if (i !== 0) {
                        slides[i].classList.remove('active');
                        if (i > 0) slides[i - 1].classList.add('active');
                    }
                }
            })
            .addTo(controller);
    }
});

3. （可选）手动控制spacer高度（如果不想用pushFollowers） #

如果坚持要关闭pushFollowers: false，需要手动给spacer设置对应高度的CSS：

.spacer-class {
    height: 2000px; /* 和最后一个场景的duration值保持一致 */
}

这样修改后，滚动到最后一个panel时，需要滚动2000px的距离才会让它离开视口，达到延长停留时长的效果。

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