javascript - 刷新页面后 Skrollr 中断

Question

My website使用 Skrollr 在主页的背景上创建视差效果。它完美地工作......除非你刷新页面:

如果您访问该网站，您会看到背景以与内容不同的速度滚动，并且它们都在页面底部一起结束。但是，如果您刷新页面，背景将停止向下滚动一半。我认为背景 div 的滚动速度比平时快得多，并且过早地到达底部。如果您单击离开页面然后导航回它，它工作正常。问题出在刷新上。

这是背景div的代码:

<div id="background" class="skrollable"
     <?php if (is_page('the-couple')) { ?>
        data-0="background-position:0% 0%;"
        data-end="background-position:0% 100%;">
    <?php } else { ?>
        data-0="background-position:0% 100%;"
        data-end="background-position:0% 100%;">
    <?php } ?>
</div>

我已经尝试在 window.load 上刷新 skrollr，但它似乎没有解决问题。还有其他人遇到过这个吗？有什么解决办法吗？

Answer 1

我没有使用 Skrollr，但这是我认为会发生的情况:

您从 cdnjs.cloudflare.com 加载您的脚本，此加载是异步的。您可能在脚本上设置了滚动速度，然后首先加载该脚本。 之后来自 cloudfare 的脚本被加载并且可能设置为默认速度。

第二次加载页面时，两个脚本都是从缓存中加载的，并且 cloudfare 脚本可能之前已加载。

解决方案:

1. 从 cloudfare 下载脚本并将其包含在您的页面上 BEFORE 速度设置。作为第一个测试，只需先将它移到头部即可。

2. 在页面加载时设置速度和调用函数。