Skrollr僅在調整屏幕大小後生成動畫

Question

我正在將Skrollr實施到客戶的網站。我正在使用這樣的相對位置：

<div id="deer" data-anchor-target="#benchmark" data-200-bottom="left: -100px" data-bottom="left: 80px"></div> 

但是，當我第一次加載頁面時，動畫似乎不起作用。但是在調整屏幕大小後（例如在Firefox中打開「響應式設計視圖」，或者打開/關閉Firebug），動畫似乎可以正常工作。

在Firefox（Mac）和Google Chrome（Windows）中會出現此問題。在Chrome（Mac）中，這個問題消失了。

請幫忙看看這個工作演示。我一直在試圖解決這個問題整天:( http://goo.gl/scFwV

Answer 1

禁用JavaScript和訪問您的網頁你會注意到#benchmark元素更接近頂部的原因很簡單：你的形象滑塊取空間，但skrollr計算這種情況發生之前偏移動畫其實是在運行，但動物進入視口之前

結論：當滑塊加載完成呼叫skrollr.init或者你可以撥打refresh（https://github.com/Prinzhorn/skrollr#refreshelements）。

Answer 2

謝謝你的答案Prinzhorn。我有s ame問題，並通過爲我的Flexslider-Container設置固定高度來修復它。