頁面刷新后Skrollr中斷

Question

我的網站使用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下載腳本， 然后在速度設置之前將其包含在頁面中。 只需先將其放在頭上作為第一個測試。

2. 在頁面加載時設置速度和呼叫功能。