jquery - 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 -> 无变化
• 通过 jQuery 刷新页面，元刷新并仅刷新 div -> 无变化
• 尝试直接使用 Themify 上模板的 src -> 没有变化
• 处理此脚本后调用任何其他脚本 -> 没有变化
• 调整窗口大小 -> 可以解决问题，但要求人们调整窗口大小没有任何意义
• {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();