fullpage.js 在verticalCentered 时防止站点在第一次加载时跳转：true答案

【问题标题】：fullpage.js prevent site jump on very first load when verticalCentered: truefullpage.js 在verticalCentered 时防止站点在第一次加载时跳转：true
【发布时间】：2017-06-15 02:40:39
【问题描述】：

fullpage.js 带有选项verticalCentered: true

嗨，

当 fullpage.js 加载时，它会将每个 <div class="section"> 的内容包含在一个 <div class="fp-tableCell" style="height:XXXpx;"> 中，并计算该内容的高度以将其放入内联样式中。这就是每个内容垂直居中的方式。

现在我的问题是，网站在第一次加载时跳转，因为首先渲染所有元素，然后 JS 开始将内容垂直居中。

我尝试手动将部分内容包含在 <div class="fp-tableCell" style="height:XXXpx;"> 中，但 fullpage.js 会忽略它并再次包含该内容。

有任何想法或提示我可以如何解决这个问题吗？

感谢您的宝贵时间！

【问题讨论】：

你能为我们创建一个演示吗？ stackoverflow.com/help/mcve
看看在“Loading..”覆盖中覆盖网站，然后在 fullpage.js 触发其afterRender event 时将其淡出/删除。您看到的跳转是 fullpage.js 更改 DOM 以创建“部分”，因此直到完成“渲染”之后才应用其测量值。
@MichaelCoker，Ofc 我应该为我的问题提供一个演示。这里是fullpage.js的官方playground：alvarotrigo.com/fullPage/#firstPage 第一张幻灯片的内容已经相当高了，所以负载跳跃是微不足道的。当您缩小并因此缩小内容时，负载跳跃非常明显。
@haxxxton，感谢您对加载叠加层的想法。如果我找不到任何其他解决方案，我想我会继续这样做。如果我可以在 fullpage.js 加载之前定位元素，那就太好了，但我不知道如何告诉 fullpage.js 不要再改变它们。

标签： javascript jquery html css fullpage.js

【解决方案1】：

你有两个选择：

在文档准备好而不是文档加载时初始化 fullpage.js（或在结束 body 标记之后，相同）
使用 CSS 设置部分的大小，并使用 CSS 将内容居中。

为了在 fullPage.js 初始化之前设置每个部分的大小，只需这样做：

/* supposing #fullpage is your fullPage.js wrapper */
html,body, 
#fullpage{
    height:100%;
}
.section,
.slide{
    height: 100%;
}

如果你说的是垂直对齐闪烁，即使在你这样做之后仍然会发生，那么我鼓励你自己使用那个包装器并自己应用垂直对齐。然后使用 fullpage.js 和verticalCentered:false

【讨论】：

直到你可以加载script标签之后 </body>，它只是wont validate/may cause issues for IE