ScrollMagic 在调整大小时更新触发位置答案

【问题标题】：ScrollMagic update trigger positions on resizeScrollMagic 在调整大小时更新触发位置
【发布时间】：2018-11-26 12:57:53
【问题描述】：

在我的网站上，ScrollMagic 场景触发挂钩位置存储在数组slideOffsets = [] 中，该数组在初始化时使用

var scene;
for (var i=0; i<slides.length; i++) {
    //Get offsets
    if(i != 1) {
        scene = new ScrollMagic.Scene({
                triggerElement: slides[i]
            })

            .setPin(slides[i])
            .addIndicators() // INDICATORS FROM PLUGINS
            .addTo(controller);
    } else {
        scene = new ScrollMagic.Scene({
                triggerElement: slides[i], duration: "10%"
            })
            .setPin(slides[i])
            .addIndicators() // INDICATORS FROM PLUGINS
            .addTo(controller);
    }
    slideOffsets.push(Math.ceil(scene.triggerPosition()));
    scenes.push(scene);

}

然后附加到每个<a> 元素的函数滚动到相应的位置。这一切都很好，但是在调整窗口大小后这不起作用。我将场景存储在一个数组中，因此我可以访问它们，但是即使在遍历它们并在调整大小后重新存储挂钩位置之后，返回的位置也根本无法反映挂钩在页面上的实际位置，即使在尝试采取离开/添加场景的持续时间。

$(window).on("resize", function() {
    slideOffsets = [];

    for (var i=0; i<slides.length; i++) {
        slideOffsets.push(Math.ceil(scenes[i].triggerPosition() - scenes[i].duration()));
    }
    console.log("regathering done");
});

（顺便说一句，我知道这会在用户调整窗口大小时不断运行，但是我想先解决这个问题）

有什么想法吗？我已经浏览文档很长时间了，但没有任何成功，.triggerPosition(), .scrollOffset() 似乎在做完全相同的事情，但在调整大小后它们都不能正常工作。

【问题讨论】：

标签： javascript jquery scrollmagic

【解决方案1】：

我终于设法解决了问题，我必须做的是遍历保存的场景并单独删除和重置 pin，刷新场景，然后询问每个的 scrollOffset 位置：

$(window).on("resize", function() {
    slideOffsets = [];
    for (var i = 0; i < scenes.length; i++) {
        scenes[i].removePin(true);
        scenes[i].setPin(slides[i]);
        scenes[i].refresh();
        slideOffsets.push(Math.ceil(scenes[i].scrollOffset()));
    }
});

【讨论】：