How to maintain scroll position on window resize while using scrollmagic

Question

I have a fixed container of 100vh x 100vw that contains 6 absolutely positioned divs that are 100vh x 100vw.

I use a dummy element that is positioned relative w/ 6 divs that are 100vh to trigger each scene.

When I resize the window, the scene's animation moves forward and backward in time. Is there a way to prevent that from happening?

Answer 1

问题是，当您调整窗口大小时，滚动条的位置将固定为绝对像素数。但是，由于您的内容基于视图高度，因此在调整窗口大小时文档的高度会动态更改。因此，窗口滚动位置占文档主体高度的百分比也在变化，这就是ScrollMagic的基础。

用简化的数学来说明：

A）给定窗口高度为1000px，文档高度为6vh * 1000px = 6000px高。如果您的窗口滚动位置是1200px，那么您将通过整个ScrollMagic时间轴的20％。

B）如果您将浏览器的大小调整为800px高，则会将文档高度更改为6hv * 800px = 4800px高。然而，窗口滚动位置将保持在1200px，现在是ScrollMagic时间轴的25％。

最简单的解决方案可能是保持文档的固定高度。