fullpage.js只会在窗口resize后scrollOverflow

我在这里设置了fullpage.js网站。 第一部分没有scrollOverflow,但第二部分是网格(使用gridify生成),它需要(在某些屏幕尺寸上),因为它是一个可滚动的部分。

问题是它拒绝滚动。 但是,如果我调整窗口大小(即使是任何方向上的单个像素),那么将为该部分显示fullpage.js滚动条。

有谁知道为什么fullpage.js这样做? 如何在不手动调整窗口大小的情况下让滚动条显示在该部分中?

值得注意的是,我已经能够使用scrollOverflow的fullpage.js示例页面来完成同样的工作。 这就是设置在这里 。 但是,我无法弄清楚它为什么在那里工作,但不能在我的原始页面中找到它!

这可能是因为在初始化fullPage.js之后,正在生成(或以某种方式修改)部分或幻灯片的内容。

您应该在afterRender回调中使用该javascript代码作为fullPage.js文档详细信息 :

AfterRender阶段()

在生成页面结构之后立即触发此回调。 这是您要用于初始化其他插件或触发任何需要文档准备好的代码的回调 (因为此插件修改DOM以创建结果结构)。

无论如何,我相信你可以通过调用reBuild提供的方法reBuild来解决它。 您可以尝试在afterRender回调中使用它,也可以直接在用于生成要应用scrollOverflow选项的部分的布局/内容之后使用它。

 $('#fullpage').fullpage({ //your options }); //code used to generate the content of your section //... //re-building fullPage.js to detect the current content of each section $.fn.fullpage.reBuild(); 

如果这不起作用,你总是可以尝试使用超时,这也应该有一些延迟解决它:

 setTimeout(function(){ $.fn.fullpage.reBuild(); }, 1000);