javascript - ScrollMagic 在调整大小时更新触发位置

Question

在我的网站上，ScrollMagic 场景触发器 Hook 位置存储在一个数组中 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>元素滚动到相应的位置。这一切都很完美，但是在调整窗口大小后这不起作用。我将场景存储在一个数组中，这样我就可以访问它们，但即使在遍历它们并在调整大小后重新存储 Hook 位置后，返回的位置也根本无法反射(reflect) Hook 在页面上的实际位置，即使在尝试采取离开/添加场景的持续时间。

$(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() 似乎在做完全相同的事情，但在调整大小后它们都不能正常工作。

Answer 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()));
    }
});