整页.js只会在窗口调整大小后滚动溢出

fullpage.js will only scrollOverflow after window resize

本文关键字：滚动 溢出 调整 窗口 js 整页      更新时间：2023-09-26

我这里有一个整页.js的网站设置。第一部分没有滚动溢出，但第二部分是一个网格（使用 gridify 生成），它要求（在某些屏幕尺寸上）它是一个可滚动的部分。

问题是它拒绝滚动。但是，如果我调整窗口大小（即使是在任何方向上调整一个像素），那么该部分将出现整页.js滚动条。

有谁知道为什么整页.js会这样做？如何在不手动调整窗口大小的情况下让滚动条出现在该部分中？

值得注意的是，我已经能够使用整页.js滚动溢出的示例页面来获得同样的事情。这是在这里设置的。但是，我一直无法弄清楚为什么它在那里工作，但不在我的原始页面中！

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

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

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);
相关文章：