How to maintain scroll position on window resize while using scrollmagic

时间:2015-06-25 18:35:44

标签: scrollmagic

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?

1 个答案:

答案 0 :(得分:2)

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

用简化的数学来说明:

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

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

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