如何在使用 scrollmagic 时保持 window 调整大小的滚动位置
How to maintain scroll position on window resize while using scrollmagic
我有一个 100vh x 100vw 的固定容器，其中包含 6 个绝对定位的 100vh x 100vw 的 div。
我使用相对于 6 个 100vh 的 div 定位的虚拟元素来触发每个场景。
当我调整 window 大小时，场景的动画会及时前后移动。有没有办法防止这种情况发生？
问题是当您调整 window 大小时，滚动条的位置保持固定在绝对像素数。但是，由于您的内容基于视图高度，因此当您调整 window 大小时，文档的高度会动态变化。因此，window 滚动位置占文档正文高度的百分比也在变化，这就是 ScrollMagic 进步的基础。
用简单的数学来说明：
A) 鉴于 window 高度为 1000 像素，您的文档高度将为 6vh * 1000 像素 = 6000 像素高。如果您的 window 滚动位置是 1200 像素，则您将完成整个 ScrollMagic 时间轴的 20%。
B) 如果将浏览器的大小调整为 800px 高，则会将文档高度更改为 6hv * 800px = 4800px 高。然而，window 滚动位置将保持在 1200 像素，现在是 ScrollMagic 时间轴的 25%。
最简单的解决方案可能是让您的文档保持固定高度。
我有一个 100vh x 100vw 的固定容器，其中包含 6 个绝对定位的 100vh x 100vw 的 div。
我使用相对于 6 个 100vh 的 div 定位的虚拟元素来触发每个场景。
当我调整 window 大小时，场景的动画会及时前后移动。有没有办法防止这种情况发生？
问题是当您调整 window 大小时，滚动条的位置保持固定在绝对像素数。但是，由于您的内容基于视图高度，因此当您调整 window 大小时，文档的高度会动态变化。因此，window 滚动位置占文档正文高度的百分比也在变化，这就是 ScrollMagic 进步的基础。
用简单的数学来说明：
A) 鉴于 window 高度为 1000 像素，您的文档高度将为 6vh * 1000 像素 = 6000 像素高。如果您的 window 滚动位置是 1200 像素，则您将完成整个 ScrollMagic 时间轴的 20%。
B) 如果将浏览器的大小调整为 800px 高，则会将文档高度更改为 6hv * 800px = 4800px 高。然而，window 滚动位置将保持在 1200 像素，现在是 ScrollMagic 时间轴的 25%。
最简单的解决方案可能是让您的文档保持固定高度。