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).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

我终于设法解决了问题，我必须做的是遍历保存的场景并单独删除并重置引脚，刷新场景然后请求每个的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更新触发器位置

1 个答案: