带有选项 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 会忽略它并再次包含该内容。
有人知道或暗示我可以如何解决这个问题吗?
感谢您的宝贵时间!
最佳答案
你有两个选择:
- 在文档就绪时而不是在文档加载时初始化 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
关于javascript - fullpage.js 在 verticalCentered : true 时防止网站在第一次加载时跳转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41927457/