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

Question

在我的网站上，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 的大小后，这不起作用。我将场景存储在一个数组中，这样我就可以访问它们，但即使在遍历它们并在调整大小后重新存储挂钩位置后，返回的位置也根本无法反映挂钩在页面上的实际位置，即使在尝试采取away/add场景的持续时间也是如此。

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

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

有什么想法吗？我已经翻阅了很长时间的文档，但没有任何成功，.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()));
    }
});

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

ScrollMagic update trigger positions on resize

javascript

jquery

scrollmagic