jquery - skrollr creates large gaps on page

Question

I'm working on a site using scrollr.js and I get a problem with height issues as elements comes in. As a reference, I'm using the scripts found on this template.

In the first screenshot, I get a large gap between my elements that fade in from both sides and the element below. However, in the second screenshot, you can see that everything is fixed when I refresh the page.

Screenshot 1

Screen shot 2

This is a recurring problem in Firefox (Mac/PC), Safari, Chrome (Mac/PC), and IE (10 and lower, untested on IE11, but having doubts the problem remains). All browsers are up to date (except IE).

---

Files

For reference (and testing) purposes, I did try linking directly to the files used by the template mentioned above. This scripts have not been changed in my local files.

<script src="http://themify.me/demo/themes/parallax/wp-content/themes/parallax/js/skrollr.js?ver=3.6.1"></script>
<script type='text/javascript' src='http://themify.me/demo/themes/parallax/wp-content/themes/parallax/js/themify.script.js?ver=3.6.1'></script>
<script>skrollr.init({mobileCheck: function(){return false;}});</script>

Attempts

• Loading the init on window.load and on document.ready -> No change
• Refreshing the page via jQuery, meta refresh and refreshing only the div -> No change
• Tried using the src directly from the template on Themify -> No change
• Calling any other script after this has been processed -> No change
• Resizing the window -> corrects the issue, but asking people to resize the window doesn't make any sense
• {forceHeight: false} option

---

What I've noticed

I've realized that on a page where I have more elements using this effect, the gap seems to get smaller. This is somewhat annoying since this would mean the script itself works, but needs more height on my page.

My div code :

<article style="left: 0px; top: 0px; opacity: 1;"
data-bottom-top="left[sqrt]: -400px;top[sqrt]:200px;opacity: 0;"
data-center-top="left[sqrt]:0px;top[sqrt]:0px;opacity:1;"
class="highlight type-highlight post col2-2 skrollable skrollable-after">
    <figure class="post-image">
        <img src="imges/picture1.jpg" />
    </figure>
</article>
<article style="right: 0px; top: 0px; opacity: 1;"
data-bottom-top="right[sqrt]:-200px;top[sqrt]:200px;opacity:0;" 
data-center-top="right[sqrt]:0px;top[sqrt]:0px;opacity: 1;" 
class="highlight type-highlight post col2-2 skrollable skrollable-after">
    <div class="post-content">
        <h2>Heading</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper justo at sollicitudin posuere. Nulla elementum, turpis vel posuere egestas, nisi diam malesuada arcu, eu pulvinar nunc mi vitae odio. Aliquam semper eros nec quam tempor, vitae ultrices turpis posuere. Aliquam mi massa, imperdiet at diam nec, volutpat vulputate dolor. Curabitur condimentum dolor tortor, at laoreet risus condimentum a. Mauris lobortis ut magna nec egestas. Etiam at accumsan est. Donec gravida scelerisque lorem sit amet vestibulum.
        </p>
    </div>
</article>

And, from testing, smaller pages don't allow for top[sqrt]:200px;; this value must be smaller (in some cases, 0, making the effect only left/right as opposed to coming in on an angle as well, which was what originally caught my attention).

Answer 1

由于您设置了默认值，您将使用 forceHeight: true。这意味着 skrollr 会计算完成所有动画所需的垂直滚动量。这通常会导致混淆，就好像您的最终动画将一个元素移出屏幕，它需要添加足够的滚动才能完成 - 这通常会在底部留下一个空白空间。

或者，如果您在页面加载后调整浏览器窗口的大小，skrollr 会尝试重新计算最大滚动量，如果在此重排期间使用 JavaScript 更改了元素的高度，它也会在底部留下空隙。

在调整大小的侦听器中，您可以添加：

skrollr.get().refresh();

Answer 2

在玩弄了脚本之后，我得出结论：

• 页面上使用脚本的项目越多，效果越好；
• 在使用脚本的项目较少的页面上，该top[sqrt]:200px;值必须更小，有时甚至0可以仅允许左/右淡入淡出，但没有任何内容进入。对于页面而言太大的值会导致较大的间隙，从而减少效果的影响。

使用这两点已成功消除了页面上的空白。

然而，在玩过这个脚本之后，我确实认为它有一些有趣的东西，但我不确定我是否更喜欢带有延迟加载的 CSS3 或类似的东西。