javascript - fullpage.js 在 verticalCentered : true 时防止网站在第一次加载时跳转

Question

带有选项 verticalCentered: true 的 fullpage.js

你好，

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

现在我的问题是，网站在第一次加载时跳转，因为首先呈现所有元素，然后 JS 启动以使内容垂直居中。

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

有人知道或暗示我可以如何解决这个问题吗？

感谢您的宝贵时间!

Answer 1

你有两个选择:

• 在文档就绪时而不是在文档加载时初始化 fullpage.js(或在结束 body 标记之后，这是相同的)
• 使用 CSS 设置部分的大小，并使用 CSS 将内容居中。

为了在 fullPage.js 初始化之前设置每个部分的大小，只需执行以下操作:

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

如果您正在谈论即使在您执行此操作后仍然会发生的垂直对齐闪烁，那么我鼓励您自己使用该包装器并自己应用垂直对齐。然后使用带有 verticalCentered:false

的 fullpage.js