当verticalCentered:true时,fullpage.js会阻止站点在第一次加载时跳转

时间:2017-01-30 00:19:05

标签: javascript jquery html css fullpage.js

带有选项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会忽略该内容并再次封闭该内容。

有任何想法或提示如何解决这个问题吗?

谢谢你的时间!

1 个答案:

答案 0 :(得分:0)

您有两种选择:

  • 在文档就绪而不是文档加载时(或在结束var newData = data.filter(function(item){ if(item.recipets[1].user_id == '11111'){ return true; } return false; }) 标记之后初始化fullpage.js),这是相同的)
  • 使用CSS设置部分的大小,并使用CSS将内容居中。

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

body

如果你在谈论垂直对齐闪烁,即使在你这样做之后仍然会发生这种情况,那么我建议你自己使用那个包装并自己应用垂直对齐。 然后将fullpage.js与/* supposing #fullpage is your fullPage.js wrapper */ html,body, #fullpage{ height:100%; } .section, .slide{ height: 100%; }

一起使用