skrollr在页面上创建了大的空白

Question

我正在使用scrollr.js在网站上工作，因为元素出现，我遇到了高度问题。作为参考，我使用的是this template上的脚本。

在第一个屏幕截图中，我的元素之间存在很大的差距，从两侧淡入和下面的元素。但是，在第二个屏幕截图中，您可以看到刷新页面时所有内容都已修复。

截屏1

截屏2

这是Firefox（Mac / PC），Safari，Chrome（Mac / PC）和IE（10及更低版本，在IE11上未经测试，但怀疑问题仍然存在）中反复出现的问题。所有浏览器都是最新的（IE除外）。

---

文件

出于参考（和测试）目的，我尝试直接链接到上述模板使用的文件。此脚本尚未在我的本地文件中更改。

<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>

尝试

• 在window.load和document.ready上加载init - ＆gt;没有变化
• 通过jQuery刷新页面，元刷新并仅刷新div - ＆gt;没有变化
• 直接使用Themify模板中的src进行尝试 - ＆gt;没有变化
• 在处理完之后调用任何其他脚本 - ＆gt;没有变化
• 调整窗口大小 - ＆gt;纠正问题，但要求人们调整窗口大小没有任何意义
• {forceHeight：false}选项

---

我注意到了什么

我意识到在我使用此效果的元素更多的页面上，差距似乎变小了。这有点令人讨厌，因为这意味着脚本本身有效，但我的页面需要更多高度。

我的div代码：

<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>

而且，从测试开始，较小的页面不允许top[sqrt]:200px;;这个值必须更小（在某些情况下，0，使得效果只是左/右，而不是以一个角度进入，这是最初引起我注意的）。

Answer 1

如果设置了默认值，则将使用forceHeight：true。 这意味着skrollr计算完成所有动画所需的垂直滚动量。这通常会引起混淆，好像你的最终动画在屏幕外移动一个元素需要添加足够的滚动来完成它 - 这通常会在底部留下一个空白区域。

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

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

skrollr.get().refresh();

Answer 2

在玩完剧本之后，我得出结论：

• 使用页面上的脚本的项目越多，它的效果就越好;
• 在使用该脚本的项目较少的页面上，top[sqrt]:200px;值必须更小，有时甚至在0以允许左/右淡化，但没有任何内容。值太大了页面造成较大的间隙，从而减少了影响的影响。

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

然而，在玩过这个剧本之后，我确实认为它有一些有趣的东西，但我不确定我是否更喜欢使用带有lazyload或类似内容的CSS3。