Question

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

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

有没有人知道为什么fullpage.js会以这种方式行事？如何在不手动调整窗口大小的情况下让滚动条显示在该部分中？

值得注意的是，我已经能够使用scrollOverflow的fullpage.js示例页面来完成同样的工作。这是设置权here。但是，我还没有弄清楚它为什么在那里工作，但不是在我的原始页面中！

Answer 1

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

您应该在afterRender回调as fullPage.js documentation details中使用该javascript代码：

<强> AfterRender阶段（）

此回调在页面结构刚刚触发后触发   产生。 这是您要用来初始化其他的回调   插件或触发任何需要文档准备好的代码（如   此插件修改DOM以创建结果结构。）

无论如何，我相信你可以通过调用fullPage.js提供的方法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);

fullpage.js只会在窗口调整大小后scrollOverflow

1 个答案: